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，并且如果可能的话，我希望不必为范围分配承诺。

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

Answer 2

您可能需要在students 上进行某种监视以了解它何时更新，然后在触发监视时运行您的_.each：

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

更多关于$watch：https://docs.angularjs.org/api/ng/type/$rootScope.Scope