Javascript 从另一个指令调用指令请考虑这个问题。_Javascript_Html_Angularjs

Javascript 从另一个指令调用指令请考虑这个问题。

javascript html angularjs

Javascript 从另一个指令调用指令请考虑这个问题。,javascript,html,angularjs,Javascript,Html,Angularjs,我有一个简单的设置： <body ng-app="myApp"> <div ng-controller="myController"> <parent-directive></parent-directive> <child-directive></child-directive> </div> </body> 父指令的定义如下： app.directiv

我有一个简单的设置：

<body ng-app="myApp">
    <div ng-controller="myController">
      <parent-directive></parent-directive>
      <child-directive></child-directive>
    </div>
</body>

父指令的定义如下：

app.directive("parentDirective", [
    "$compile",
    function (
        $compile) {
        return {
            scope: {
                person: "="
            },
            restrict: "E",
            template: "<h3>I'm a parent</h3>",
            controller: [
                "$scope",
                function ($scope) {
                    // --- PRIVATE --- //

                    var self = {};

                    $scope.ClickMe = function() {
                      alert('Parent clicked');
                    };
                }],
            link: function ($scope, $elem, $attrs) {
            }
        };
    }]);

app.directive（“parentDirective”[
“$compile”，
作用(
$（编译）{
返回{
范围：{
人：“=”
},
限制：“E”，
模板：“我是父母”，
控制器：[
“$scope”，
职能（$范围）{
//---私人--//
var self={}；
$scope.ClickMe=函数（）{
警报（“父项已单击”）；
};
}],
链接：函数（$scope、$elem、$attrs）{
}
};
}]);

和子指令的定义如下：

app.directive("childDirective", [
    "$compile",
    function (
        $compile) {
        return {
            scope: {
                person: "="
            },
            restrict: "E",
            require: "^?parentDirective",
            template: "<h3>I'm a child, click <button ng-click='ClickMe()'>here</button></h3>",
            controller: [
                "$scope",
                function ($scope) {
                    // --- PRIVATE --- //

                    var self = {};

                    $scope.ClickMe = function() {
                      alert('child clicked');
                      $scope.parentDirective.ClickMe();
                    };
                }],
            link: function ($scope, $elem, $attrs) {
            }
        };
    }]);

app.directive（“childDirective”[
“$compile”，
作用(
$（编译）{
返回{
范围：{
人：“=”
},
限制：“E”，
要求：“^？父指令”，
模板：“我是个孩子，点击这里”，
控制器：[
“$scope”，
职能（$范围）{
//---私人--//
var self={}；
$scope.ClickMe=函数（）{
警报（“单击子项”）；
$scope.parentDirective.ClickMe（）；
};
}],
链接：函数（$scope、$elem、$attrs）{
}
};
}]);

子项单击被处理，但在“父项”上定义的单击返回未定义的：

TypeError:无法读取未定义的属性“ClickMe”

看着控制台

知道出了什么问题吗？

将子指令放入父指令模板中。然后使用$scope.$parent.ClickMe（）。下面是它的样子

简单设置：

<body ng-app="myApp">
    <div ng-controller="myController">
        <parent-directive></parent-directive>
    </div>
</body>

父指令：

app.directive("parentDirective", [
    function () {
        return {
            scope: {},
            restrict: "E",
            template: "<h3>I'm a parent</h3><child-directive></child-directive>",
            controller: [
                "$scope",
                function ($scope) {
                    $scope.ClickMe = function() {
                        alert('Parent clicked');
                    };
                }
            ]
        };
    }
]);

app.directive("childDirective", [
    function () {
        return {
            restrict: "E",
            template: "<h3>I'm a child, click <button ng-click='ClickMe()'>here</button></h3>",
            controller: [
                "$scope",
                function ($scope) {
                    $scope.ClickMe = function() {
                        alert('child clicked');
                        $scope.$parent.ClickMe();
                    };
                }
            ]
        };
    }
]);

app.directive（“parentDirective”[
函数（）{
返回{
作用域：{}，
限制：“E”，
模板：“我是父母”，
控制器：[
“$scope”，
职能（$范围）{
$scope.ClickMe=函数（）{
警报（“父项已单击”）；
};
}
]
};
}
]);

儿童指令：

app.directive("parentDirective", [
    function () {
        return {
            scope: {},
            restrict: "E",
            template: "<h3>I'm a parent</h3><child-directive></child-directive>",
            controller: [
                "$scope",
                function ($scope) {
                    $scope.ClickMe = function() {
                        alert('Parent clicked');
                    };
                }
            ]
        };
    }
]);

app.directive("childDirective", [
    function () {
        return {
            restrict: "E",
            template: "<h3>I'm a child, click <button ng-click='ClickMe()'>here</button></h3>",
            controller: [
                "$scope",
                function ($scope) {
                    $scope.ClickMe = function() {
                        alert('child clicked');
                        $scope.$parent.ClickMe();
                    };
                }
            ]
        };
    }
]);

app.directive（“childDirective”[
函数（）{
返回{
限制：“E”，
模板：“我是个孩子，点击这里”，
控制器：[
“$scope”，
职能（$范围）{
$scope.ClickMe=函数（）{
警报（“单击子项”）；
$scope.$parent.ClickMe（）；
};
}
]
};
}
]);

知道怎么回事吗

不能

要求

同级指令

所需的指令控制器方法不会自动暴露在您的范围内

您应该在控制器本身上公开方法，而不是在分配的
$scope
上公开方法
您可以
require
在与required指令相同的元素上定义的指令，或父元素上定义的指令

将您希望在其他指令中可用的方法公开到
this
而不是$scope上，因为$scope方法在具有独立作用域时无法按您希望的方式工作

.directive('parent', controller: function () { this.clickMe = function () {}; } }

让你的榜样发挥作用

<parent> <child></child> </parent>

简化版（&working）的plunker:
我可能会以不同的方式思考您的问题，但我会看看$broadcast。其思想是，您可以广播一个事件，并且在您的案例中有“n”个指令侦听该事件

布罗德卡斯特：

$scope.ClickMe = function() { alert('child clicked'); $rootScope.$broadcast('child-click');; };
听着：

$scope.$on('child-click', function (event, args) { alert('Parent clicked'); });

您好@spike您应该查看链接这是一个很好的答案，并且针对这个问题。
$scope.$on('child-click', function (event, args) { alert('Parent clicked'); });