Why is a parent controller's $scope not accessible from a (child) directive?

Question

From reading Scopes (Part 2 of the AngularJS - from beginner to expert in 7 steps series): A $scope can contain both data and functions available in a view. If AngularJS cannot find a function on a local $scope, the containing (parent) $scope will be checked for the property or method there.

Given my implementation of a directive's compile function (based on Angularjs: understanding a recursive directive):

compile: function(tElement, tAttrs) {

    var contents = tElement.contents().remove();
    console.log(contents);
    var compiledContents;

    // postLink function.
    return {
        post: function(scope, iElement, iAttrs) {
            if (!compiledContents) {
                // Get linking function.
                compiledContents = $compile(contents);
            }

            // Link scope and the template together.
            compiledContents(scope, function(clone) {
                iElement.append(clone);
            });

            scope.myEvent = function() {
                console.log("My Event handled!");
            };
        },
        pre: function(scope, iElement, iAttrs) { }
    }
}

In the code above, I have attached a function to the $scope of the instance element, and this is successfully called from the view. However I expected to be able to move the function definition from the instance element scope and into a parent controller's $scope:

angular.module('Myapp').controller('MyParentController', ['$scope',
        function($scope) {
          $scope.myEvent = function() {
                    console.log("My Event handled!");
          };
}]);

However the parent controller's function is never called even though it is a parent of the directive for which I provided my own implementation of compile.

Updated to add code for the directive:

angular.module('Myapp').directive("my-directive", function(RecursionHelper) {
    return {
        restrict: "E",
        scope: {
            data: '=data'
        },
        templateUrl: 'view.html',
        compile: function(tElement, tAttributes) {
            return RecursionHelper.compile(tElement, tAttributes);
        }
    };
});

..and the RecursionHelper:

angular.module('Myapp').factory('RecursionHelper',
    ['$compile',
    function($compile) {
         var RecursionHelper = {
            compile: function(tElement, tAttrs) {

                var contents = tElement.contents().remove();
                var compiledContents;

                return {
                    post: function(scope, iElement, iAttrs) {
                        if (!compiledContents) {
                            compiledContents = $compile(contents);
                        }

                        compiledContents(scope, function(clone) {
                            iElement.append(clone);
                        });
                    },
                    pre: function(scope, iElement, iAttrs) { }
                }
            }
        }
        return RecursionHelper;
    }]);

is `$scope.myEvent` called via `ng-click`? could you pls paste your directive's template here as well — hjl, Dec 30 '14 at 16:17

score 0 · Answer 1 · answered Dec 30 '14 at 16:09

0

because your directive has an isolated scope, you can only access data in parent scope.

scope: {
    data: '=data'
},

answered Dec 30 '14 at 16:09

hjl

2,794
3
18
26

score 0 · Accepted Answer · answered Dec 31 '14 at 07:09

change your scope to

    scope: {
        data: '=data'
        myEvent: '=myEvent'
    }

and then on your directive change this

       angular.module('Myapp').directive("my-directive",

to angular.module('Myapp').directive("myDirective",

then pass the function as in

 <my-directive data="scope-data" my-event="scope-event-function()"></my-directive>

Why is a parent controller's $scope not accessible from a (child) directive?

2 Answers2