У меня есть два пользовательских директивы в моем приложении angularJS. Один поступок в качестве родителя и другого действует как ребенок. Я пытаюсь получить доступ к родительской области внутри дочерней директивы. Но я не получаю желаемого результата.
<div ng-controller="CountryCtrl">
{{myName}}
<div ng-controller="StateCtrl">
<state nameofthestate="'Tamilnadu'">
<city nameofthecity="'Chennai'"></city>
</state>
</div>
</div>
и мой script выглядит как
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
Может ли кто-нибудь просветить меня, что я делаю неправильно здесь?
