时间戳

首页 > 解决方案 > JQuery 更新后 ng-transclude 不再起作用

javascript - JQuery 更新后 ng-transclude 不再起作用

问题描述

这是我在最新的 JQuery 更新后开始遇到的一个奇怪问题。

我们在应用程序中使用 angularjs 1.7.9。我们有以下组件。它基本上是一个日期字段包装器。

export class DateFieldComponent {
  ...
  transclude: any = {
    iconContent: "?iconContent",
  };
  template: string = `
    <div>
      <span
        ng-click="$ctrl.focusInput()"
        ng-transclude="iconContent"
      />
      <input
        ...
      ></input>
    </div>
  `;
}

angular.module("App").component("dateField", new DateFieldComponent());

如您所见，我们使用 ng-transclude 将图标加载到输入字段。我们这样做是为了让任何使用这个组件的人都可以从客户端动态添加图标。

JQuery在我们从更新3.4.0到之前，该组件工作正常3.5.0。更新后dateField有问题。但是没有控制台错误。但我能够将问题指向下一行

ng-transclude="iconContent"

所以如果我删除这条线，一切正常。添加此行会使组件无法正确呈现。

我知道 JQuery 更新对 angularjs 没有影响，因为 angularjs 使用它自己的jquery-lite版本。另外据我所知，ng-transclude与JQuery.

我还注意到，在这次更新之后，我们在应用程序中使用 ng-transclude 的所有地方都存在类似的问题。

我在这里想念什么？任何线索将不胜感激。

标签： javascriptjqueryangularjsangularjs-ng-transclude

解决方案

原来我们在标记中犯了一个简单的错误，它不再适用于 JQuery 3.5.0 版本

这是罪魁祸首

<span
  ng-click="$ctrl.focusInput()"
  ng-transclude="iconContent"
/>

修复是span正确关闭如下

<span
  ng-click="$ctrl.focusInput()"
  ng-transclude="iconContent">
<span/>

推荐阅读