Angular指令的链接函数不会操纵DOM

Question

我正在尝试从服务访问数据，以便可以使用jQuery处理ngRepeat ed列表。 我无法使link功能正常工作。 根据我所读的内容，我希望无论哪种方式

app.directive('myDir', function() {
  return {
    restrict: 'E',
    templateUrl: 'url.html',
    link: function(scope, el, attrs) {
      //jQuery to manipulate DOM here
    }
  };
});

要么

app.directive('myDir', function() {
  return {
    restrict: 'E',
    templateUrl: 'url.html',
    compile: function(scope, el, attrs) {
      return {
        post: function() {
          //jQuery to manipulate DOM here
        }
      }
    }
  }
});

但是元素尚未在页面上，因此它不起作用。 我想念什么？

Answer 1

尝试等待一个$ digest阶段。 这将为ng-repeat提供足够的时间来呈现DOM元素。 您可以使用$ timeout。

link: function(scope, el, attrs) {
    $timeout(function() {
        //jQuery to manipulate DOM here
    });
}

编辑：

检查以下示例。 在这里，我们有my-dir收集ng-repeat创建的所有元素。 有一个帮助程序mockup-box内部指令，该指令包括my-dir父指令控制器，并使用其方法注册自身（ 其元素 ）。

然后， my-dir控制器调用invalidateChildren函数，该函数通过延迟validateChildren函数的执行来等待children指令的累积。

在validateChildren函数中，我们操作DOM元素，并确保它们会在那里，因为每个元素仅在编译时才注册。 validateChildren函数中有一些伪代码，但您可以在其中放置任何内容。

还有另外一个好处。 我们不再依赖ng-repeat，也不知道my-dir将如何创建子元素。 他们甚至可能是“静态”孩子。 它还支持添加其他子代。 如果ng-repeat生成其他元素，它们将再次在父控制器中注册并调用validateChildren函数。

 angular.module('example', []) .controller('AppCtrl', function($scope) { $scope.mockupData = ['a', 'b', 'c', 'd'] }) .directive('myDir', function() { return { controller: function($element, $timeout) { var ctrl = this; var childrenDirty = false; this.children = []; this.addChild = function(jqChild) { ctrl.children.push(jqChild); ctrl.invalidateChildren(); }; this.removeChild = function(jqChild) { var index = ctrl.children.indexOf(jqChild); if (index >= 0) { ctrl.children.splice(index, 1); } }; this.invalidateChildren = function() { if (!childrenDirty) { childrenDirty = true; $timeout(ctrl.validateChildren); } }; this.validateChildren = function() { childrenDirty = false; // Will be fire only once angular.forEach(ctrl.children, function(jqChild) { jqChild.html('value: "' + jqChild.html() + '"'); }); }; }, link: function() { } } }) .directive('mockupBox', function() { return { require: '^myDir', link: function(scope, iElement, iAttrs, myDirCtrl) { myDirCtrl.addChild(iElement); scope.$on('$destroy', function() { myDirCtrl.removeChild(iElement); }); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="example" ng-controller="AppCtrl"> <div my-dir> <div ng-repeat="data in mockupData" mockup-box>{{data}}</div> </div> </div> 

预期行为

• mockupData值为['a'，'b'，'c'，'d']；
• validateChildren函数编辑子元素的内容，并在前面添加“ value：”。

代码执行的结果将是每个子元素的value: "<letter>" 。