Question

我需要从父元素中获取子元素内的'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>'
    };
});

Answer 1

由于item指令定义了隔离范围，因此需要在item上为所需的每个范围属性定义属性。所以至少你需要：

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

现在，c右侧的=需要是box指令的范围属性，因此请创建一个链接函数来实现：

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

Fiddle

Answer 2

使用translcude时，父dom对象实际上不是scopes-tree中的父对象。这里有很好的范围继承描述：

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

你可以直接拿到它，但这不是一个很好的方式：

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

示例：http://plnkr.co/edit/YuYry9?p=preview

我相信有更多类似于ng的方法......

如何绑定父范围属性？

2 个答案: