AngularJS carico di direttiva prima che i dati

Question

Diciamo che sto caricando una variabile in $ portata con $ http:

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

mio modello utilizza questi dati:

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

Questa direttiva può caricare PRIMA insegnante finisce caricamento, ma la mia direttiva ha codice che dipende dall'array teacher.students che viene caricato:

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

Come faccio ottenere il comportamento che voglio qui? Non voglio smettere di usare $ http, e vorrei non dover assegnare una promessa all'ambito, se possibile.

Answer 1

Utilizzare un orologio per attendere che students sia disponibile. Una volta disponibile, chiami il codice che dipende da esso, quindi rimuovi l'orologio. È possibile saltare la rimozione dell'orologio se si desidera che il codice venga eseguito ogni volta students modifiche.

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

Avrete probabilmente bisogno di fare qualche tipo di orologio sul students di sapere quando viene aggiornato, quindi eseguire il _.each quando l'orologio viene attivato:

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

Maggiori info su $watch: https://docs.angularjs.org/api/ng/type/$rootScope.Scope