1

这是一个显示客户地址的组件（请原谅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)() : '';
        }
    };
});

另一个基于它，用于显示包含在超链接和地图标记中的客户地址：

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

问题是，当$interpolate在clinicAddress' 指令中运行时，index它是未定义的，因为它在indexedClinicAddress' 范围内。我怎样才能$interpolate使用父范围，我假设它是相同的范围indexedClinicAddress？

4

2 回答 2

3

而不是使用 $scope.$parent 和 $interpolate 你应该使用 scope@属性——来自Angular 指令指南：

@ 或 @attr - 将本地范围属性绑定到 DOM 属性的值。结果始终是字符串，因为 DOM 属性是字符串。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{ localName:'@myAttr'}，然后小部件范围属性 localName 将反映 hello {{name}} 的插值。随着 name 属性的变化，小部件范围上的 localName 属性也会发生变化。该名称是从父范围（不是组件范围）读取的。

app.directive('clinicAddress', function($interpolate) {
  return {
    restrict: 'E',
    templateUrl: 'directives/clinicAddress',
    scope: { clinic: '=', functions: '=', addressStyle:'@style' },
    link: function(scope, element, attrs) {
    }
  };
});
于 2013-05-18T15:59:10.590 回答
0

采用

$scope.$parent

获取对父范围的引用

于 2013-05-18T15:54:43.693 回答