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実行すると、のスコープ内にあるため未定義です。と同じスコープであると想定している親スコープを使用するにはどうすればよいですか?clinicAddressindexindexedClinicAddress$interpolateindexedClinicAddress

4

2 に答える 2

3

@$scope.$parent と $interpolate を使用する代わりに、Scope属性を使用する必要があります - Angular ディレクティブ ガイドから:

@ または @attr - ローカル スコープ プロパティを DOM 属性の値にバインドします。DOM 属性は文字列であるため、結果は常に文字列になります。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。指定されたスコープのウィジェット定義: { 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 に答える