自定义子指令访问父级的范围

Question

我在angularJS应用程序中有两个自定义指令.一个充当父母,另一个充当孩子.我试图访问子指令内的父范围.但我没有得到所需的输出.

<div ng-controller="CountryCtrl">
{{myName}}
    <div ng-controller="StateCtrl">
        <state nameofthestate="'Tamilnadu'">
            <city nameofthecity="'Chennai'"></city>
        </state>
    </div>
</div>

我的剧本看起来像

var app = angular.module("sampleApp",[]);
app.controller("CountryCtrl",function($scope){
    $scope.myName = "India";
});
app.controller("StateCtrl",function($scope){
});
app.directive("state",function(){return {
    restrict : 'E',
    transclude: true,
    scope : { myName  : '=nameofthestate'},
    template:"**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>"
}});
app.directive("city",function(){return {
    restrict : 'E',
    require:'^state',
    scope : { myName  : '=nameofthecity'},
    template:"****   {{myName}} is inside {{$parent.myName}} which is in {{$parent.$parent.myName }}<br/> "
}});

相应的JSFiddle可在https://jsbin.com/nozuri/edit?html,js,output中找到

我得到的输出是

India
** Tamilnadu is inside India
**** Chennai is inside India which is in Tamilnadu

而预期的产出是

India
** Tamilnadu is inside India
**** Chennai is inside Tamilnadu which is in India

任何人都可以教我这里我做错了什么吗？

Answer 1

city指令$ parent是一个transcluded状态指令.

state指令的transcluded范围是继承状态指令的$ parent,这是控制器,因此$ parent.MyName = India.

transcluded范围的$ parent是state指令隔离范围(scope = {}),这就是为什么$ parent.$ parent.MyName = Tamilnadu(Angular 1.3更新的一部分)

发生了什么的详细信息: 如何从AngularJS中具有自己的范围*的自定义指令*中访问父范围？

transclude:true - 该指令创建一个新的"transcluded"子作用域,它原型继承自父作用域.如果该指令还创建了隔离范围,则transcluded和隔离范围是兄弟.每个范围的$ parent属性引用相同的父范围.

Angular v1.3 update:如果该指令还创建了隔离范围,则transcluded范围现在是隔离范围的子代.被抄袭和隔离的范围不再是兄弟姐妹.transcluded范围的$ parent属性现在引用隔离范围.

另外,马修的答案对于父子指令通信也是正确的.

Answer 2

这对你有用吗？改编自这个答案.

没有直接的方法来访问被转换内容的父元素,因此我们将父控制器注入子进程以访问其范围.

  var app = angular.module('myApp', []);

  app.controller("CountryCtrl",function($scope){
      $scope.myName = "India";
  });

  app.controller("StateCtrl",function($scope){
  });

  app.directive("state",function(){return {
      restrict : 'E',
      transclude: true,
      scope : { myName  : '=nameofthestate'},
      template:"**   {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>",
      controller: function ($scope) {
        this.getName = function () {
          return $scope.myName;
        }
      }
  }});

  app.directive("city",function(){return {
      restrict : 'E',
      require:'^state',
      scope : { myName  : '=nameofthecity'},
      template:"****   {{myName}} is inside {{parentName}} which is in {{$parent.myName }}<br/> ",
      link: function(scope, element, attrs, ctrl) {
        scope.parentName = ctrl.getName();
      }
  }});