仅在加载数据后应用 Angular 指令答案

【问题标题】：Apply an Angular directive only after data is loaded仅在加载数据后应用 Angular 指令
【发布时间】：2014-02-01 13:09:37
【问题描述】：

我有一个应用于表格的指令，外部 div 有一个应用于它的控制器：

<div ng-controller="MyController">

    <table ng-mydirective>
        ...
    </table>

</div>

控制器加载一些数据，然后使用ng-repeat在表中创建一些行/列。

到目前为止还不错。

指令需要访问可能由数据生成的列，但指令在控制器之前运行。

是否可以在加载/渲染数据后运行指令？或者是通过在表的 dom 上使用 $watch 来实现此目的的唯一方法？

【问题讨论】：

将一个变量传递到你的指令中并观察它。

标签： angularjs angularjs-directive

【解决方案1】：

<table ng-show="myDataSource.length>0" ng-mydirective>
        ...
</table>

或者如何在指令的模板本身中应用它，即隐藏表格直到填充数据源之后。但是在这两种情况下，问题是如果您显示一个查询返回 0 结果的表怎么办？这意味着您的指令根本不会显示。无论哪种方式，处理此问题的最佳方法都是在指令内。 IE。隐藏表格，除非您的 $http 调用成功执行。

【讨论】：

【解决方案2】：

如果您的指令未使用隔离作用域，它将自动接收对控制器作用域中数据成员的访问。如果您在模板中引用该数据成员，Angular 会自动在其上设置 $watch，您无需执行任何其他操作；否则你需要添加你自己的 $watch。如果您使用的是隔离作用域，那么它会稍微复杂一些，但类似的模式也成立。

【讨论】：

【解决方案3】：

你有两种方法可以做到这一点

简单的方法是使用 ng-if 请求数据字段。例如

<table ng-mydirective ng-if="nameOfTheDataSource !== undefined">
 ...
</table>

您还可以向指令发送一个属性并观察它直到数据到达。这对模板级别来说更复杂但看起来很简单：

模板

<table ng-mydirective ng-model="nameOfTheDataSource">
 ...
</table>

指令

angular.module(....)
   .directive('ng-mydirective', function() {
       return{
            scope: {
               ....
               ngModel: '='
            }
            link: function(scope, element, attrs) {
               var firstload = scope.$watch('ngModel', function(value) {

                   if (scope.ngModel !== undefined) {
                       // Do what is needed
                   }
                   // Deregister itself
                   firstload();
                }
            }
       } 
   }

【讨论】：