4

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

例如，考虑以下情况：

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

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

现在，$scope.aMethodParentCtrl() 由 ng-click 指令触发。我想做的是调用$scope.bMethodChildCtrl()。我该怎么做？

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

4

2 回答 2

9

请看以下内容。

我正在使用$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-01T19:42:38.997 回答
4

这类似于 rajkamal 所说的，因为您需要使用广播......但是您需要动态更改广播以针对您需要的任何孩子。

这是一个显示示例的 plunker

这是代码：

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-01T20:43:41.340 回答