Question

我的角度应用程序实际上遇到了很大的问题。

我有一个工厂，它发出一个http请求来获取解析器并返回一个promise。

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

当我使用＆＃34; then（）＆＃34;时，我的控制器会出现问题。关键字，其中的值将传递给指令，如下所示：

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

当我在视图中记录变量custom时，一切都很好，我看到了＆＃39; 4＆＃39;。但是，当我在我的指令中使用此变量时会出现问题：

<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在他的评论中提到的那样，你必须$ watch观察items数组（这样当你最终获得Angular知道的变化数据时，你可以做任何你需要处理的数据）< / p>

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

AngularJS：承诺后失去指令范围

3 个答案: