Question

我正在使用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还需要执行一些操作（保存表单数据）。如何实现这一目标？

Answer 1

请查看以下内容。

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

Answer 2

这与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>

我在这里所做的是创建一种机制，通过该机制我可以命名我的指令，然后通过名称向他们广播。如果代码不是自我解释，请告诉我。我希望这会有所帮助。

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

2 个答案: