Question

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

<div ng-controller="MyController">

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

</div>

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

到目前为止这很好。

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

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

Answer 1

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

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

Answer 2

如果您的指令未使用隔离范围，它将自动接收对控制器范围内的数据成员的访问权限。如果您在模板中引用该数据成员，Angular会自动在其上设置$ watch，您无需执行任何其他操作;否则你需要添加自己的$ watch。如果您正在使用隔离范围，那么它会更复杂，但类似的模式仍然存在。

Answer 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();
                }
            }
       } 
   }

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

3 个答案: