AngularJS指令在数据之前加载

Question

假设我正在使用$ http将变量加载到$ scope中:

$http.get('/teachers/4').success(function(data){
  $scope.teacher = data;
});

我的模板使用这些数据:

Teacher: {{teacher.name}}
<students-view students="teacher.students"></students-view>

该指令可以加载BEFORE老师完成加载,但我的指令的代码取决于正在加载的teacher.students数组:

app.directive('studentsView', function(){
  return {
    scope: { students: '=' },
    controller: function($scope){
      _.each($scope.students, function(s){
        // this is not called if teacher loads after this directive
      });
    }
  };
});

我如何得到我想要的行为？我不想停止使用$ http,如果可能的话,我不想为范围分配承诺.

Answer 1

使用手表等待students可用.一旦可用,您可以调用依赖它的代码,然后移除手表.如果希望每次students更改时都执行代码,则可以跳过删除监视.

app.directive('studentsView', function(){
  return {
    scope: { students: '=' },
    link: function($scope){
      var unwatch = $scope.$watch('students', function(newVal, oldVal){
        // or $watchCollection if students is an array
        if (newVal) {
          init();
          // remove the watcher
          unwatch();
        }
      });

      function init(){
        _.each($scope.students, function(s){
          // do stuff
        });
      }
    }
  };
});