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

Question

請考慮這個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似乎不正確。

我怎樣才能解決這個問題？ 這可能很簡單...

Answer 1

它應該是

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

因為$ ctrl得到必需的控制器this 。

Answer 2

因為您已將孩子嵌套在parents控制器中，所以您可以使用來訪問它的作用域

$scope.$parent

在您的情況下：

$scope.$parent.ActivateMe($attrs.name);

柱塞： http ://plnkr.co/edit/YyppT9pWnn1PFWJXBAOF?p=info

Answer 3

發情的答案，再加上評論，就可以了。 為了完整起見，我針對的場景是一個工作樣本：

Plunkr 樣本。

更新的HTML

<body ng-app="ngApp">
    <div ng-controller="myController">
      <top-parent-directive>

        <interacting-child-directive name="Child 1">

          <meaningless-level-directive header="Sub 1">
            <interacting-child-directive name="Child 3"/>
          </meaningless-level-directive>

        </interacting-child-directive>

        <interacting-child-directive name="Child 2">

          <meaningless-level-directive header="Sub 2">
            <interacting-child-directive name="Child 4"/>
          </meaningless-level-directive>

        </interacting-child-directive>

      </top-parent-directive>
    </div>
</body>

meaninglessLevelDirective

顧名思義，這只是添加了一個額外的級別：

app.directive('meaninglessLevelDirective', [
  '$compile',
  function($compile){
    return {
      scope: {
        header: '@'
      },
      restrict: 'E',
      transclude: true,
      templateUrl: 'meaninglessLevelDirective.html',
      controller: function($scope){
      }
    };
  }
]);

meaninglessLevelDirective.html

<div class="meaninglessLevelStyle">
  {{header}}
  <div style="padding: 10px" ng-transclude>
  </div>  
</div>

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

問題描述

3 個解決方案

解決方案1
2 已采納 2015-09-15 13:53:03

解決方案2
1 2015-09-15 13:50:34

解決方案3
0 2015-09-15 14:45:59

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

問題描述

3 個解決方案

解決方案1 2 已采納 2015-09-15 13:53:03

解決方案2 1 2015-09-15 13:50:34

解決方案3 0 2015-09-15 14:45:59

解決方案1
2 已采納 2015-09-15 13:53:03

解決方案2
1 2015-09-15 13:50:34

解決方案3
0 2015-09-15 14:45:59