从AngularJS的父控制器调用指令控制器的方法

我正在使用AngularJS，我有一个指令，它有自己的控制器。它继承了父控制器的范围。从AngularJS的父控制器调用指令控制器的方法

作为一个例子，考虑以下因素：

function ParentCtrl() { 
    $scope.aMethod = function() { 
     // DO SOMETHING 
    }; 
} 

function ChildCtrl() { 
    $scope.bMethod = function() { 
     // DO SOMETHING ELSE 
    } 
}

现在，ParentCtrl的$scope.aMethod（）由NG点击指令触发。我想要做的是调用ChildCtrl（）的$scope.bMethod。我该怎么做？

编辑：一些更多的信息。与ParentCtrl关联的模板有一个按钮和多个指令。每个指令都会使用不同的输入集来加载表单。当单击ParentCtrl模板中的按钮时，指令将通过ng-switch on和ng-switch-when一个接一个加载。
当用户单击该按钮时，属于该指令的ChildCtrl用于将数据存储在其各自的表单中。
因此，单击按钮时：
1. ChildCtrl保存与已加载的当前指令关联的模型。
2. ParentCtrl加载系列中的下一个指令。
ng-click被绑定到与ParentCtrl关联的按钮。但是，当点击该按钮时，ChildCtrl还需要执行一些操作（保存表单数据）。如何做到这一点？

来源

2013-03-01 callmekatootie

你不能。但是一个父级范围属性上的服务或'$ watch'可以完成同样的事情。你能提供一个关于你的用例的更多细节吗？ – 2013-03-01 19:10:53

@JoshDavidMiller当然。编辑我的问题，以反映相同的... – callmekatootie 2013-03-01 19:29:29

你可以发布一个超级简单的蹲点，确定核心问题空间？ – 2013-03-01 19:56:53

请看下面的内容。

我正在使用$broadcast的概念。我已经厌倦了复制的情况下，您给了像父控制器，子指令有自己的控制器等：

var animateAppModule = angular.module('animateApp', []) 
 
animateAppModule.controller('tst', function($scope) { 
 
    $scope.test = function() { 
 
    $scope.$broadcast('clickMessageFromParent', { 
 
     data: "SOME msg to the child" 
 
    }) 
 
    } 
 
}).directive('myDirective', function() { 
 
    return { 
 
    controller: function($scope) { 
 

 
    }, 
 
    link: function($scope, element) { 
 
     $scope.$on('clickMessageFromParent', function(scopeDetails, msgFromParent) { 
 
     //console.log(msgFromParent) 
 
     element[0].innerHTML = msgFromParent.data; 
 
     }) 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="tst"> 
 
    <input type="button" ng-click="test()" value="click" /> 
 
    <div my-directive="somvalue"></div> 
 
</div>

JSFiddle

来源

2013-03-01 19:42:38 rajkamal

我还没有尝试过，但我看到这个问题。我有多个指令将按顺序加载，也就是说，单击按钮时，会加载一个新指令。如果所有指令都响应'clickMessageFromParent'事件，那么它将不可行。我只想要当前的子控制器作出响应 - 是否会如此？ – callmekatootie 2013-03-01 19:54:36

听众只需连接到只有你想要从父.. – rajkamal 2013-03-01 20:05:29

那精美的作品调用来自控制器的指令来听的指令。 – 2014-02-14 03:13:40

这类似于rajkamal是说，因为您需要使用广播...但是您需要动态更改广播以将其指定给您需要的任何孩子。

Here is a plunker showing an example

而这里的代码：

app.controller('MainCtrl', function($scope) { 

    // a method that broadcasts to a selected child. 
    $scope.broadcastToSelectedChild = function(){ 
    $scope.$broadcast('call-' + $scope.broadcastTo); 
    }; 
}); 

app.directive('testDir', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     'name': '@' 
    }, 
    template: '<div>{{name}} called: {{called}}</div>', 
    link: function(scope, elem, attr) { 

     scope.called = false; 

     //a child function to call. 
     scope.childFunction = function(){ 
     scope.called = true; 
     }; 

     //set up the name to be used as the listened to event. 
     var removeOn; 
     scope.$watch('name', function(v) { 
     if(removeOn) removeOn(); 
     removeOn = scope.$on('call-' + scope.name, function(){ 
      scope.childFunction(); 
      }); 
     }); 
    } 
    }; 
});

，在这里它是在HTML：

<div ng-controller="MainCtrl"> 
    <test-dir name="test1"></test-dir> 
    <test-dir name="test2"></test-dir> 
    <test-dir name="test3"></test-dir> 
    <select ng-model="broadcastTo" ng-options="x as x for x in ['test1', 'test2', 'test3']"></select> 
    <button ng-click="broadcastToSelectedChild()">test</button> 
    </div>

我在这里所做的就是创建一个机制，通过它我可以说出我的指令，然后通过名字广播给他们。如果代码不是自我解释，请告诉我。我希望这有帮助。

来源

2013-03-01 20:43:41

从AngularJS的父控制器调用指令控制器的方法

回答

相关问题