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

我在我的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

城市指令$ parent是一个跨州的州指令范围。

状态指令的被覆盖的范围inheritance了$ parent作为控制器的状态指令，因此这就是$ parent.MyName = India的原因。

transcluded作用域的$父母是为什么$ parent。$ parent.MyName = Tamilnadu（Angular 1.3更新的一部分）的状态指令隔离作用域（scope = {}

发生什么的细节： 如何在自定义指令*中使用自己的作用域在AngularJS中访问父范围？

transclude：true – 指令创build一个新的“transcluded”子范围，它从父范围原型inheritance。 如果指令还创build隔离范围，则隔行范围和隔离范围是兄弟。 每个作用域的$ parent属性引用相同的父作用域。

Angular v1.3更新：如果指令也创build一个隔离范围，则被隔行范围现在是隔离范围的子级。 跨越和隔离的范围不再是兄弟姐妹。 transcluded范围的$ parent属性现在引用隔离范围。

另外Matthew的回答对于亲子指导沟通是正确的。

Answer 2

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

没有一种直接的方式来访问transcluded内容的父元素，所以我们将父控制器注入到子级来访问它的作用域。

  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(); } }}); 

Answer 3

当AngularJS遇到transclude时，它在克隆HTML之前将其replace为template或templateUrl内容。 然后，当遇到ng-transclude时，它会编译transcluded内容，但将它链接到父范围而不是指令的隔离范围。 因此，被截取的内容仍然可以访问父控制器及其内容，而HTML指令具有独立的范围（或者新的范围，视情况而定）。

AngularJS启动并运行

Answer 4

检查我的指令溶剂，它与很多parrents的作品。 我所做的是去除跨界，并要求params。 不要打扰脏的HTML，只是看js，简单的f ..：D

  CRM.directive('inputwv', function ($compile) { var getTemplate = function(contentType) { var template = ''; switch(contentType) { case '3': template = '<input type="number" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px;width:100px">' break; case '0': template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' break; case '1': template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' break; case '2': template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' break; case '4': template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' break; case '5': template = '<input type="date" class="datepicker" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px"><script type="text/javascript">$(\'.datepicker\').pickadate({selectMonths: true, selectYears: 15});</script>' break; default: template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index )" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' } return template; } var linker = function(scope, element, attrs) { element.html(getTemplate(attrs.typ)).show(); $compile(element.contents())(scope); } return { restrict: "E", link: linker }; });