Question

从阅读Scopes (Part 2 of the AngularJS - from beginner to expert in 7 steps series)开始：$scope可以包含视图中可用的数据和功能。如果AngularJS无法在本地$scope上找到函数，则将检查包含（父）$scope的属性或方法。

鉴于我实现了一个指令的编译功能（基于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) { }
    }
}

在上面的代码中，我已将一个函数附加到实例元素的$scope，并且已从视图成功调用此函数。但是我希望能够将函数定义从实例元素范围移动到父控制器的$scope：

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

但是父控制器的函数永远不会被调用，即使它是我为其提供自己的compile实现的指令的父级。

更新以添加指令的代码：

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);
        }
    };
});

..和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;
    }]);

Answer 1

因为您的指令具有独立的范围，所以您只能访问父范围中的data。

scope: {
    data: '=data'
},

Answer 2

将范围更改为

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

然后在你的指令上改变这个

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

要 angular.module（ 'MYAPP'）。指令（ “myDirective”，

然后传递函数，如

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

为什么无法从（子）指令访问父控制器的$ scope？

2 个答案: