AngularJS：在指令内无法访问作用域

Question

model.data 包含以下内容：

{
    "name": "Jamie",
    "age": 25
}  

我有一个指令看起来像这样：

<my-directive data="model.data"></my-directive>  

我已将指令定义如下：

app.directive('myDirective', function(){  
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        templateUrl: 'grid.html',
        controller: function($scope) {
            console.log($scope);
            console.log($scope.data);
        }
    }
}

问题是console.log($scope)返回$scope中的值。我可以看到它包含数据：

{
    $$asyncQueue: Array[0],
    $$childHead: null,
    ...
    ...
    data: Array[1]
}

然而，console.log($scope.data) 返回 undefined。有什么线索吗？

- user109187

---

@ArunPJohny console.log($scope) 的输出可以在 http://i.imgur.com/9wBJU5N.png 找到。 - user109187

关于model.data的创建，它属于不同的控制器。model.data具有某些值。在包含指令的页面中，如果我显示{{model.data}}的值，则可以正确地看到它。 - user109187

最好的部分是，在templateUrl中，如果我也尝试显示{{model.data}}，那么它的值就可以被看到。但是我似乎无法仅从控制器中访问它。 - user109187

你能否更改代码编辑器Fiddle以重现这个案例？ - Arun P Johny

这看起来像是一个经典的异步处理问题，为了调试问题，您可以在 http.get() 调用之前、http.get() 成功处理程序内部以及指令控制器内部添加一些控制台语句，并查看执行顺序。 - Arun P Johny

Answer 1

无论何时像这样console.log($scope); 工作，但console.log($scope.someProperty);不工作，这是因为someProperty正在作为解析承诺(如$http调用或使用$q创建的承诺)的结果被设置。

第一个日志似乎有效，实际上当你手动查看日志条目(即，单击展开其内容)时，该值已被填充/解决。

在您的控制器中，您将需要$watch该属性，并设置watch回调函数来执行一旦数据到达/被解决时要做的任何操作。

- Mark Rajcok