AngularJS 指令在数据之前加载

Question

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

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

我的模板使用此数据:

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

该指令可以在教师完成加载之前加载，但我的指令具有依赖于正在加载的 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，并且如果可能的话，我希望不必向范围分配 promise 。

Answer 1

使用 watch 等待学生有空。一旦它可用，您就可以调用依赖于它的代码，然后删除 watch 。如果您希望每次学生发生变化时都执行代码，您可以跳过移除 watch 。

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