AngularJS: Losing scope в директиве после обещания

Question

У меня на самом деле большая проблема в моем угловом применении.

У меня есть фабрика, которая выполняет http-запрос, чтобы получить спулер и возвращает обещание.

Spooler.prototype.load = function() { 
    var self = this; 
    var deferred = $q.defer(); 
    $http.post('/spooler/' + this.id + '/load') 
     .success(function(data) { 
      self.statistics = data.statistics; 
      deferred.resolve(self); 
     }) 
     .error(function(err, code) { 
      deferred.reject(err); 
     $log.error(err, code); 
    }); 
    return deferred.promise; 
}; 

Проблема происходит в моем контроллере, когда я использую «то()» ключевое слово, значения внутри этого затем будут переданы директивы следующим образом:

$scope.load = function(){ 
     spooler.load().then(
      function(dataSpooler){ 
       $scope.spooler = dataSpooler; 
       $scope.custom = 4; // example of random var inside then() 
      } 
      function() { 
       $scope.dataFail = 'error error' ; 
      } 
     ); 
    } 

При входе в переменную обычай в представлении, все хорошо, я вижу «4». Однако проблема возникает, когда я использую эту переменную в своей директиве следующим образом:

<highchart-pie items="custom"></highchart-pie> 

Вот код Директивы:

.directive('highchartPie', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      items : '=' 
     }, 
     controller: function ($scope, $element, $attrs) { 
     }, 

     template: '<div style="width:100%;margin: 0 auto;">not working</div>', // 
     link: function (scope, element, attrs) { 
       console.log(scope); // i can see the item value 4 
       console.log(scope.items); !!! undefined !!! 
       link function is actually way bigger and renders the element to the template (useless to be shown) 
     } 
    } 

Вот мой вывод, когда я задаю

$scope.custom = 4; 

Внутри функции then() это не работает, потому что директива, вероятно, не получает значения вовремя (даже в функции ссылок в директиве, которую видит журнал).

Если я объявляю $ scope.custom = 4; в верхней части контроллера до метода then(), каждый работает плавно ...

Идея кто-нибудь? Заранее спасибо ! :)

Answer 1

первый способ,

$scope.load = function(){ 
     return spooler.load().then(
      function(dataSpooler){ 
       $scope.spooler = dataSpooler; 
       $scope.custom = 4; // example of random var inside then() 
      } 
      function() { 
       $scope.dataFail = 'error error' ; 
      } 
     ); 
    } 

, но не самый лучший способ, возможно,

$scope.load = spooler.load; 

тогда

$scope.load().then(
       function(dataSpooler){ 
        $scope.spooler = dataSpooler; 
        $scope.custom = 4; // example of random var inside then() 
       } 
       function() { 
        $scope.dataFail = 'error error' ; 
       } 
      ); 

Answer 2

Ваш console.log работает до обещание не будет решена, и поэтому элементы не определены. Как упоминает @Razvan Balosin в своем комментарии, вам нужно будет смотреть массив элементов (так что, когда вы, наконец, получите данные, которые Angular узнает об изменении, и вы можете делать все, что вам нужно делать с данными)

Answer 3

Вот что я предлагаю вам сделать:

link: function link(scope, element, attrs) { 
scope.$watch('film',function(item){ 
    // if there is any data in film, render chart 
    if(item) { 
    console.log("Scope: " , scope); 
    console.log("Film:", scope.film); // works now 
    } 
    }) 
} 

и модифицированный plunker