0

親から子要素内の 'c' 属性を取得する必要があります ( jsfiddleを参照) 可能ですか?

<div ng-app="myApp">
    <box c="yellow">
       <item>item</item>
    </box>
</div>    

angular.module('myApp', [])
.directive('box', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div ng-transclude></div>'
    };
})
.directive('item', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {c:'='},
        template: '<div>c:{{c}}</div>'
    };
});
4

2 に答える 2

2

item ディレクティブは isolate スコープを定義するため、必要なスコープ プロパティごとに item の属性を定義する必要があります。したがって、最低限必要なものは次のとおりです。

<item c="c">item</item>

ここで、cの右側が=box ディレクティブのスコープ プロパティである必要があるため、それを実現するためのリンク関数を作成します。

link: function(scope, element, attrs) {
    scope.c = attrs.c;
}

フィドル。

于 2013-02-11T22:38:00.283 に答える
0

When you use translcude, the parent dom object is not actually a parent in scopes-tree. Nice scope inheritance description here:

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

You can get it directly, but it is not a beautiful way:

var app = angular.module('plunker', []);

app.directive('box', function(){
     return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { c: '@' },
        template: '<div ng-transclude></div>'
    };
});

app.directive('item', function(){
  return {
      restrict: 'E',
      replace: true,
      template: '<div>c:{{$parent.$$prevSibling.c}}</div>'
  };
});

Example: http://plnkr.co/edit/YuYry9?p=preview

I believe there are more ng-like ways of doing that...

于 2013-02-11T12:27:43.357 に答える