Angular指令将范围隔离到父绑定undefined

时间:2015-03-12 17:17:11

标签: javascript angularjs angularjs-directive restangular

我正在使用(非常棒的)Restangular,并且我遇到了迫使我使用scope.$parent(不太棒)的东西,而我并不想使用它。即使我的控制器是我的指令范围的父作用域,似乎在我的父控制器执行之前评估=隔离的作用域绑定。

使用以下HTML:

<div ng-controller="myController">
    <div x-my-directive x-some-value="parentValue"></div>
</div>

以下指令:

myApp.directive("myDirective", function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {
            console.log(scope.someValue); // Logs 'undefined' :(
        },
        scope: {
            someValue: "="
        }
    }
});

以下控制器:

myApp.controller("myController", function($scope, allMyValues) {
    allMyValues.getList().then(function(parentValue){
        $scope.parentValue = parentValue;
    });
}

如我的指令link函数所示,评估应绑定到父父范围属性的范围属性将返回undefined。但是,当我将指令link功能更改为以下内容时:

    myApp.directive("myDirective", function () {
        return {
            restrict: 'A',
            link: function (scope, elem) {
               setTimeout(function() {
                  console.log(scope.someValue); // Logs '{1: number_1, 2: number_2}'
                }, 2000);
            },
            scope: {
                someValue: "="
            }
        }
    });

我如何解决这个问题?

由于

2 个答案:

答案 0 :(得分:1)

在将值分配给范围之前,您似乎正在等待解决的承诺。

有几种方法可以解决这个问题。

一种方法是尝试将Restangular调用移动到包含控制器的视图的解析函数。然后,您可以直接在控制器中注入已解析的数据

另一种方法可能是直接将promise分配给作用域,然后在链接函数中等待解析。

scope.someValue.then(function(value) { console.log(value); });

答案 1 :(得分:1)

应该有所帮助:

myApp.controller("myController", function($scope, allMyValues) {
//add this line
$scope.parentValue={};

    allMyValues.getList().then(function(parentValue){
        $scope.parentValue = parentValue;
    });
}
在您的请求得到解决之前, $ scope.parentValue不存在,因此请在代码中添加如下所示的行 示例演示http://jsbin.com/komikitado/1/edit