javascript - AngularJS ngIf 阻止在指令中查找元素

Question

我有一个包含 ngIf 的 AngularJS 指令，我想在指令链接函数中修改 ngIf 内的一些 DOM。不幸的是，ngIf 似乎阻止我在链接函数中查找其中的 DOM 元素。

以下是该指令的代码:

directive('column', function () {
    return {
      templateUrl: 'views/column.html',
      restrict: 'E',
      scope: {
        column: '='
      },
      controller: ['$scope', function ($scope) {

        $scope.editing = true;
        $scope.toggleEditing = function () {
          $scope.editing = !$scope.editing;
        };

      }],
      link: function postLink(scope, element) {
        var select = element.find('select');
        console.log(select); // See if it can find the select element
        // var types = scope.column.types();
        // add types as options to the select element
      }
    };
  });

这是该指令的简化 html:

<div class="column">
    <div>{{ column.title }}</div>
    <form name="columnForm" role="form" ng-if="editing">
        <select></select>
    </form>
</div>

这里是 jsFiddle 示例的链接 http://jsfiddle.net/dedalusj/Y49Xx/1/

链接函数中的 element.find 调用返回一个空数组，但一旦我从表单中删除 ngIf ，它就会返回正确的选择 DOM 元素。我感觉我这样做的方式是错误的。

更新

感谢您的回答，但我找到了另一个解决方案。我只是创建了另一个封装表单的指令，并使用 ng-if="editing" 将其添加到 column 指令模板中。

form 指令没有自己的作用域，因此它有效地在 column 指令作用域之外运行，并且始终可以访问 select 元素，因为它位于其 DOM 内部树。我支付了额外指令的费用，但我不必使用 $timeout hack。我创建了一个新的 jsFiddle 来说明解决方案 http://jsfiddle.net/dedalusj/nx3vX/1/

谢谢@Michael，但我不能简单地使用 ng-option 因为 types 数组来自 XML 文件，并且它的元素是其他 angular.element 对象无法使用ng-option轻松插入。

Answer 1

ngIf 指令通过使用 Angular 的嵌入功能来工作。编译/链接周期中发生的事情是:

1. 编译时，ngIf 中的内容将从 DOM 中删除
2. Angular 运行链接函数。 ngIf 的链接函数之前运行过使用它的指令的链接函数。当ngIf的链接函数运行时，它使用 $scope.$watch() 来观察 ng-if 的值属性。
3. 指令的链接函数运行，此时 ngIf 的内容不是 DOM 的一部分
4. 调用步骤 (2) 中设置的监视，然后 ngIf 将调用 $transclude 函数插入 ngIf 的内容如果 ng-if 属性值为 true，则将 code> 插入 DOM。
5. 您在指令的链接函数中注册的任何监视函数、$timeout 调用或使用 $scope.$evalAsync 都将运行。

因此，如果您想访问 ngIf 内容中的元素，则需要在上述步骤 4 之后运行代码。这意味着在指令的链接函数中使用 $scope.$watch、$timeout 或 $scope.$evalAsync 注册的任何函数都将起作用。对于一次性设置代码，我可能会选择 $scope.$evalAsync:

angular.directive('yourDirective', function () {
  return {
    ...
    link: function(scope, elem) {
      scope.$evalAsync(function () {
        // code that runs after conditional content
        // with ng-if has been added to DOM, if the ng-if
        // is enabled
      });
    }
  };
});