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

发布时间：2020-12-17 17:05:25 所属栏目：安全来源：网络整理

导读：我正在使用AngularJS,我有一个拥有自己的Controller的指令.它继承了父控制器的范围. 例如,请考虑以下事项： function ParentCtrl() { $scope.aMethod = function() { // DO SOMETHING };}function ChildCtrl() { $scope.bMethod = function() { // DO SOMETH

我正在使用AngularJS,我有一个拥有自己的Controller的指令.它继承了父控制器的范围.

例如,请考虑以下事项：

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

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

现在,ParentCtrl()的$scope.aMethod由ng-click指令触发.我想要做的是调用ChildCtrl()的$scope.bMethod.我该怎么做？

编辑：更多信息.与ParentCtrl关联的模板有一个按钮和多个指令.每个指令都加载一个包含不同输入集的表单.当单击ParentCtrl模板中的按钮时,通过ng-switch on和ng-switch-when一个接一个地加载指令.
当用户单击该按钮时,属于指令的ChildCtrl旨在以各自的形式存储数据.
因此,单击按钮时：
1. ChildCtrl保存与已加载的当前指令关联的模型.
2. ParentCtrl加载系列中的下一个指令.
ng-click绑定到与ParentCtrl关联的按钮.但是当单击该按钮时,ChildCtrl还需要执行一些操作(保存表单数据).如何实现这一目标？

解决方法

请看下面的内容.

我正在使用$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!