javascript - AngularJS nested components and scope -

here's component displaying customer's address (please excuse jade):

address(style='{{addressstyle}}')     strong {{clinic.businessname}}     br     span {{clinic.address.address1}}     br     span(ng-switch='{{clinic.address.address2 != null}}')         span(ng-switch-when='true')             | {{clinic.address.address2}}             br     span {{clinic.address.suburb}} {{clinic.address.state}} {{clinic.address.postcode}}     br     abbr(title='phone') p:     |  {{functions.formatphoneno(clinic.phone)}} 

app.directive('clinicaddress', function($interpolate) {     return {         restrict: 'e',         templateurl: 'directives/clinicaddress',         scope: { clinic: '=', functions: '=' },         link: function(scope, element, attrs) {             scope.addressstyle = attrs.style ? scope.addressstyle = $interpolate(attrs.style)() : '';         }     }; }); 

and one, based on it, displaying customer's address wrapped in hyperlink , map marker:

a(href='#!/clinic/{{clinic.urlfragment}}')     div(style='width:50px;height:50px;background:url(/img/map/{{index+1}}.png) 190px 30px no-repeat;')     clinic-address(clinic='clinic', functions='functions', style='background:url(/img/map/{{index+1}}.png) 190px 30px no-repeat;') 

app.directive('indexedclinicaddress', function() {     return {         restrict: 'e',         scope: { clinic: '=', index: '=', functions: '=' },         templateurl: 'directives/indexedclinicaddress'     }; }); 

the problem is, when $interpolate runs in clinicaddress's directive, index undefined because it's in indexedclinicaddress's scope. how can make $interpolate use parent scope, assume same scope indexedclinicaddress?

instead of using $scope.$parent , $interpolate should should use scope @ attribute - the angular directives guide:

@ or @attr - bind local scope property value of dom attribute. result string since dom attributes strings. if no attr name specified attribute name assumed same local name. given , widget definition of scope: { localname:'@myattr' }, widget scope property localname reflect interpolated value of hello {{name}}. name attribute changes localname property on widget scope. name read parent scope (not component scope).

app.directive('clinicaddress', function($interpolate) {   return {     restrict: 'e',     templateurl: 'directives/clinicaddress',     scope: { clinic: '=', functions: '=', addressstyle:'@style' },     link: function(scope, element, attrs) {     }   }; });