AngularJS：从子指令中要求父指令

debugcn 发表于 Dev

尖刺

请考虑这个Plunk。

我正在尝试为复杂的指令访问设置测试用例，但是从父指令调用方法时出现错误：

家长指令

app.directive('topParentDirective', [
    '$compile',
    function($compile){
      return {
        restrict: 'E',
        transclude: true,
        template: '<h3>I\'m the parent directive.</h3><div ng-transclude></div>',
        controller: function($scope) {
          $scope.ActivateMe = function(callerName) {
            alert('Parent activated from caller ' + callerName);
          };
        }
      };
    }
]);

子指令

app.directive('interactingChildDirective', [
    '$compile',
    function($compile){
      return {
        scope: {
          name: '@'
        },
        restrict: 'E',
        require: ['^topParentDirective'],
        templateUrl: 'interactingChildDirective.html',
        link: function($scope, $elem, $attrs, $ctrl) {
          var self = {};

          console.log($ctrl);

          $scope.CallTopParent = function() {
            $ctrl.ActivateMe($attrs.name);
          };
        }
      };
    }
]);

InteractingChildDirective.html

包含：

My name is {{name}}, <button ng-click="CallTopParent()">Click me</button>!

Html

<body ng-app="ngApp">
<div ng-controller="myController">
  <top-parent-directive>
    <interacting-child-directive name="Child 1"></interacting-child-directive>
  </top-parent-directive>
</div>
</body>

问题

TypeError: $ctrl.ActivateMe is not a function
    at n.$scope.CallTopParent

出现这种情况是因为$ ctrl似乎不正确。

我怎样才能解决这个问题？这可能很容易...

那将是烧瓶

它应该是

    controller: function($scope) {
      this.ActivateMe = function(callerName) {
        alert('Parent activated from caller ' + callerName);
      };
    }

因为$ ctrl获得必需的控制器的this。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。