javascript - Custom child directive accessing scope of parent

Question

I am having two custom directives in my angularJS app. One act as a parent and other act as child. I am trying to access parent's scope inside child directive. But I am not getting the desired output.

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

and my script looks like

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/> "
}});

Corresponding JSFiddle available in https://jsbin.com/nozuri/edit?html,js,output

The output which i am getting is

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

and the expected output is

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

Can anyone educate me what i am doing wrong here?

question from:https://stackoverflow.com/questions/31200906/custom-child-directive-accessing-scope-of-parent

Answer 1

The city directive $parent is a transcluded scope of state directive.

The transcluded scope of the state directive is inherit for $parent of state directive which is controller thus that is why $parent.MyName = India.

The $parent of transcluded scope is the state directive isolated scope ( scope = {} ) that is why $parent.$parent.MyName = Tamilnadu ( Part of Angular 1.3 update )

Bit of detail of what happen : How to access parent scope from within a custom directive *with own scope* in AngularJS?

transclude: true - the directive creates a new "transcluded" child scope, which prototypically inherits from the parent scope. If the directive also creates an isolate scope, the transcluded and the isolate scopes are siblings. The $parent property of each scope references the same parent scope.

Angular v1.3 update: If the directive also creates an isolate scope, the transcluded scope is now a child of the isolate scope. The transcluded and isolate scopes are no longer siblings. The $parent property of the transcluded scope now references the isolate scope.

Also Matthew's answer is correct for parent-child directive communications.