AngularJS问题：从指令访问父控制器作用域变量返回Undefined

嘿，我来帮你解决这个头疼的问题！你遇到的$scope.$parent能拿到对象但变量返回undefined的情况，主要是两个原因在搞鬼：

• 异步请求的时序坑：父控制器里的assignmentInfo是通过$http.get异步获取的，当你的指令初始化并尝试访问它时，这个请求大概率还没跑完，assignmentInfo还没被赋值，自然就undefined了。
• 隔离作用域的设计初衷：你给指令加了隔离作用域（scope: {data:'=', title:'='}），Angular搞隔离作用域就是为了让指令更独立，减少对父作用域的直接依赖，直接用$scope.$parent其实不是最佳实践，容易把作用域层级搞乱。

两种解决方案，推荐第一种！ #

方案一：用隔离作用域绑定传数据（标准玩法） #

既然已经用了隔离作用域，直接把父作用域的assignmentInfo绑定到指令上就好，这才是Angular指令的正确打开方式：

1. 调整指令代码

把父作用域的assignmentInfo绑定到指令的data属性，然后用$watch监听数据变化（因为是异步加载）：

app.directive('getInfo', [function(){ 
    return { 
        restrict: 'A', 
        scope:{ 
            data:'=', // 用来接收父作用域的assignmentInfo
            title: '=' 
        },
        link: function(scope) {
            // 监听data的变化，等异步数据加载完成再操作
            scope.$watch('data', function(newAssignmentInfo) {
                if(newAssignmentInfo) {
                    // 这里就能拿到完整的data.record啦
                    console.log(newAssignmentInfo);
                    // 接下来你想干啥都可以~
                }
            });
        }
    }; 
}]);

2. HTML里给指令传数据

<div ng-controller="myCtrl" ng-init="init()">
    <!-- 把父作用域的assignmentInfo传给指令的data属性 -->
    <div get-info data="assignmentInfo" title="你的标题内容"></div>
</div>

方案二：应急用$watch监听父作用域（不推荐） #

如果你非要用$scope.$parent，那得确保等父作用域的数据加载完再访问，用$watch监听就行：

app.directive('getInfo', [function(){ 
    return { 
        restrict: 'A', 
        scope:{ 
            data:'=', 
            title: '=' 
        },
        link: function(scope) {
            // 监听父作用域的assignmentInfo变化
            scope.$watch('$parent.assignmentInfo', function(newVal) {
                if(newVal) {
                    console.log(newVal); // 此时数据已经加载完成啦
                }
            });
        }
    }; 
}]);

不过还是真心推荐方案一，隔离作用域绑定能让你的指令复用性更强，也更符合Angular的设计思路~

另外提个小细节：AngularJS的$http.success已经被废弃了，建议换成.then的写法，更规范：

$http.get('url.php').then(function(response) { 
    $scope.assignmentInfo = response.data.record; 
});

内容的提问来源于stack exchange，提问作者jquery404