从AngularJS父控制器调用指令控制器的方法 [英] Call a Directive Controller's method from Parent Controller in AngularJS

问题描述

我使用AngularJS和我有有它自己的控制器指令。它继承了父控制器的范围。

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

 函数ParentCtrl（）{
    $ scope.aMethod =功能（）{
        // 做一点事
    };
}功能ChildCtrl（）{
    $ scope.bMethod =功能（）{
        //做别的事情
    }
}
 

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

编辑：一些更多的信息。与ParentCtrl相关联的模板有一个按钮和多个指令。每个指令加载不同组输入形式。当在ParentCtrl模板按钮被点击，指令上加载了一个又一个通过 NG-开关手段和 NG-开关时。结果
当用户点击该按钮时，属于指令的ChildCtrl意指将数据存储在各自的形式。结果
因此，当按钮被点击：结果
1. ChildCtrl保存与已加载的电流指令相关联的模型。结果
2. ParentCtrl加载该系列中的下一个指令。结果
NG-点击绑定到这是与ParentCtrl相关的按钮。但ChildCtrl也需要做一些动作（保存表单数据）点击该按钮时。怎样才能实现这一目标？

解决方案

请看看下面的内容。

我用 $广播的概念。
我已经累复制你给像父控制器的情况下，用自己的控制器等子指令：

\r

\r

VAR animateAppModule = angular.module（'animateApp'，[]）\r
animateAppModule.controller（'TST'，函数（$范围）{\r
  $ scope.test =功能（）{\r
    $范围。$广播（'clickMessageFromParent'，{\r
      数据：些味精孩子\r
    }）\r
  }\r
}）指令（myDirective'，函数（）{\r
  返回{\r
    控制器：函数（$范围）{\r
\r
    }，\r
    链接：功能（$范围，元素）{\r
      $范围。在$（'clickMessageFromParent'，函数（scopeDetails，msgFromParent）{\r
        //console.log(msgFromParent）\r
        元素[0] .innerHTML = msgFromParent.data;\r
      }）\r
    }\r
  }\r
}）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG控制器=TST＆GT;\r
  ＆LT;输入类型=按钮NG点击=测试（）VALUE =点击/＆GT;\r
  ＆LT; D​​IV我-指令=somvalue＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

的jsfiddle

I am using AngularJS and I have a directive which has its own Controller. It inherits the scope of the Parent Controller.

As an example, consider the following:

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

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

Now, $scope.aMethod of ParentCtrl() is triggered by a ng-click directive. What I want to do is call $scope.bMethod of ChildCtrl(). How can I do it?

EDIT: Some more information. The template associated with the ParentCtrl has a button and multiple directives. Each directive loads a form with different sets of inputs. When the button in the ParentCtrl Template is clicked, the directives are loaded one after another by means of ng-switch onand ng-switch-when.
When the user clicks the button, the ChildCtrl which belongs to the directives is meant to store the data in their respective forms.
Thus, when the button is clicked:
1. The ChildCtrl saves the model associated with the current directive that has been loaded.
2. The ParentCtrl loads the next directive in the series.
ng-click is bound to the button which is associated with ParentCtrl. But ChildCtrl also needs to do some action (save the form data) when that button is clicked. How does one accomplish that?

解决方案

Please have a look at the following.

I'm using the concept of $broadcast. I have tired to replicate the scenarios you have given like parent controller, child directive with its own controller etc:

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

这篇关于从AngularJS父控制器调用指令控制器的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！