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

Posted 2023-05-09

【中文标题】JQuery 更新后 ng-transclude 不再起作用

【英文标题】：ng-transclude does not work any more after JQuery update

【发布时间】：2020-08-29 05:24:28

【问题描述】：

这是我在最新的 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 的所有地方都存在类似的问题。

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

【问题讨论】：

AngularJS 只有在 jQuery 之前加载时才使用它的 jq-lite。否则，它会使用页面上全局可用的任何 jQuery。在不相关的注释中，写transclude: any = iconContent: "?iconContent", ; 非常糟糕。写 transclude = iconContent: "?iconContent", ; 或者停止使用 TypeScript

【参考方案1】：

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

这是罪魁祸首

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

修复是正确关闭span，如下所示

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