Fatal编程技术网
  • javascript/
  • Javascript AngularJS：需要子指令中的父指令 请考虑这个问题。

Javascript AngularJS：需要子指令中的父指令 请考虑这个问题。

javascript angularjs

Javascript AngularJS：需要子指令中的父指令 请考虑这个问题。,javascript,angularjs,Javascript,Angularjs,我试图为复杂指令访问设置测试用例，但从父指令调用方法时出错： 父指令 InteractingChildDirective.html 包含： My name is {{name}}, <button ng-click="CallTopParent()">Click me</button>! 这是因为$ctrl似乎不正确 我怎样才能解决这个问题？这可能是一件非常简单的事情…因为您已将子项嵌套在父控制器中，您可以使用 $scope.$parent 就你而言： $scope.

我试图为复杂指令访问设置测试用例，但从父指令调用方法时出错：

父指令

InteractingChildDirective.html

包含：

My name is {{name}}, <button ng-click="CallTopParent()">Click me</button>!
这是因为$ctrl似乎不正确

我怎样才能解决这个问题？这可能是一件非常简单的事情…

因为您已将子项嵌套在父控制器中，您可以使用

$scope.$parent
就你而言：

$scope.$parent.ActivateMe($attrs.name);
普朗克：

应该是

    controller: function($scope) {
      this.ActivateMe = function(callerName) {
        alert('Parent activated from caller ' + callerName);
      };
    }
因为$ctrl得到了必需的控制器的
这个
estus的答案，加上注释，是有效的。完整地说，我的目标场景的一个工作示例是：

普朗克尔

更新的Html

meaninglessLevelDirective.html



{{header}}

我不愿意这样做，因为我正在调查的场景要复杂得多，我想要这样的东西：A、B、C、B。在这种情况下，A是topParentDirective，B是interactingChildDirective。关键是第二个B应该总是找到最上面的A，而不是C。啊，我明白了，如果解释起来不太复杂的话，如果我们知道可能会出现什么复杂情况，它可能会帮助我们提供更好的答案。我将使用$parent场景让测试正常工作，并在我再次陷入困境时进行更新：）（显然，我正在编辑，而你在评论）.如果我明白的话，第二个B是嵌套的4？它需要C的作用域还是只需要A的作用域？希望这是有意义的。正确的，第二个B实例只需要A（至少我现在能看到）。我只是在他的plunkr中尝试了这个，但无法使它工作-除了您提供的代码之外，还需要其他什么吗？这是因为
require:['^topParentDirective']
意味着您将需要几个控制器，在这种情况下，您必须使用
$ctrl[0]。ActivateMe
。否则，对于单个必需的控制器，请坚持使用
require:'^topParentDirective'
。您的意思是将topParentDirective中的ActivateMe定义更改为使用this.ActivateMe吗？这就是我尝试过的，没有改变。当你发表你的评论时，我让它在我原来的Plunk上工作。我以前确实尝试过$ctrl[0]，但它不起作用。无论如何，这是可行的。$ctrl[0]也可以，但在这种情况下是不必要的。通常，您会将var命名为“ctrls”，以提示它包含一个数组require'获取控制器的实例，它是控制器构造函数中“this”引用的对象。您还可以查看“要求”、“控制器”和“链接”部分。

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



$scope.$parent



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



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



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



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



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