AngularJS如何从指令访问控制器范围答案

【问题标题】：AngularJS How to access Controller scope from DirectiveAngularJS如何从指令访问控制器范围
【发布时间】：2018-08-30 01:22:22
【问题描述】：

我正在尝试从指令函数访问父控制器范围。当我尝试获取 $scope.$parent 的值时，它会返回对象。但是，当我尝试从该对象访问任何变量时，它会返回 Undefined。

app.controller('myCtrl', function ($scope, $http, $timeout) {

    $scope.init = function(){

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

    };
});


app.directive('getInfo', [function(){
    return {
        restrict: 'A',
        scope:{
            data:'=',
            title: '='
        },
        link:function(scope, elem, attrs){
            scope.$watch('data.visible', function(val){
                // do something

            });
        },
        controller: function($scope) {
            console.log($scope.$parent); // return an object

            console.log($scope.$parent.assignmentInfo); // return undefined


        },
        templateUrl: 'template.html'
    };
}]);

首先console.log($scope.$parent) 返回以下输出：

但是$scope.$parent.assignmentInfo返回underfined

如何访问assignmentInfo？

【问题讨论】：

试试这个方法：jsfiddle.net/wZrjQ/1
不是我想做的事

标签： angularjs angular-directive angular-controller

【解决方案1】：

实际上是你试图打印assignmentInfo，而它还没有被分配，所以你应该$watch给它：

angular.module('app', [])
.controller('ctrl', ['$scope', '$timeout', function($scope, $timeout) {
    $timeout(function() {
      $scope.assignmentInfo = 'some data';
    }, 1000)
}])
 .directive('myDirective', function() {
    return {
      scope: {},
      template: '<div>from directive: {{assignmentInfo}}</div>',
      controller: function($scope) {      
        $scope.$watch(function() {
          return $scope.$parent.assignmentInfo;
        }, function(value) {
          if (value){
            console.log(value);
            $scope.assignmentInfo = value;
          }
        })
      }
    }
})

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>    
  <my-directive></my-directive>
</div>

【讨论】：