在 ng-repeat 之后执行 jQuery 函数

Question

提前感谢您的帮助。我在我的网络应用程序中使用了这个tagmanager。在此之前，jQuery 函数可以正常工作

<input type="text" name="tags" placeholder="Tags" class="tagsManager" />

放在

下

ng-repeat = "(key,val) in client_proj"

这是一个简短的sn-p代码

<div class="accordion-group" ng-repeat="(key,val) in client_proj"><!--For Every Project in Project List-->
  <div class="accordion-heading" style="background-color:#EFF8FB">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#mainAccordion" href="#{{val.id}}" ng-click="disableEditor()">
      <div align="center">{{val.title}}</div>
    </a>
  </div>
  <div id="{{val.id}}" class="accordion-body collapse">
    <div class="accordion-inner" style="font-size:12px; background-color:white">
      <strong>Technologies Exposure:</strong><br/>
      <div ng-hide="editorEnabled">{{val.exposure}}</div>
      <div ng-show="editorEnabled">
        <textarea ng-show="editorEnabled" class="span12" ng-model="val.exposure" rows="12" style="resize:vertical"></textarea>
        <input type="text" name="tags" placeholder="Tags" class="tagsManager" />

它显示为普通输入，不执行任何功能，例如在按下或回车后创建新标签。

谁能告诉我发生了什么？

Answer 1

1.创建一个自定义指令，作为 jQuery 插件的包装器：

angular.module('<YOUR APP OR MODULE>').directive('tagsManager', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.tagsManager();
            //whatever other logic would go here
        }
    };
});

然后从您的脚本中删除 tabsManager 的自动初始化（类似于 $('<SELECTOR>').tagsManager(); 或 jQuery('<SELECTOR>').tagsManager(); ）

最终，在您的 ng-repeat 中，将指令添加到输入元素（可选地添加其他属性——如果需要，您可能必须在指令中为这些属性编程行为）

<input tags-manager>

这将使 AngularJS 在您的输入（通过自定义指令）在 DOM 中呈现之后初始化 tabsManager。

有道理吗？