angularjsangular-directiveangular-controller

AngularJS How to access Controller scope from Directive


I am trying to access parent controller scope from a directive function. When I try to get the value of $scope.$parent it returns me the object. But when I try to access any variable from that object it returns 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'
    };
}]);

First console.log($scope.$parent) return the following output: enter image description here

But $scope.$parent.assignmentInfo return underfined

How do I access the assignmentInfo?


Solution

  • It is caused, by fact, that you try to print assignmentInfo, when it is not yet assigned, so you should $watch for it:

    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>