Angularjs嵌套指令范围

Question

请参阅Plunker。 问题是：当我在主控制器中使用item-over指令时，它会触发精细的OnOver。这没关系：

    <a href="#" ng-repeat="item in main.Data" item-over="main.OnOver(item)">{{item.Name}}</a>

但是当我把它放在list-view指令中时，它不会触发控制器的OnOver方法。这不起作用：

<list-view itemssource="main.Data">
  <a href="#" item-over="main.OnOver(item)">{{item.Name}}</a>
</list-view>

我做错了什么？

Answer 1

问题是listView指令正在创建隔离范围，因此您无法访问此指令的main或item范围。即使onOver也不可访问，因为它属于父范围，

如果您不特别需要在listview指令中对itemSource进行双向绑定，则通过在return语句中设置scope: true来使指令继承父作用域。

在指令中使用attr来访问attr值而不创建隔离范围 -

return {
   link:function (scope, element, attrs) {
       scope.itemsSource = attrs.itemsSource
   }
}

你将以相同的方式传递itemsSource -

<list-view items-source="main.Data">

现在你的指令范围内有值，你可以使用它们。

或者，因为您正在使用父作用域，所以您可以使用$ parent直接访问该值 - 在您的指令中：

link: function (scope, element) {
    scope.itemsSource = scope.$parent.itemsSource
}

在检查plunkr时还有一些问题，请查看你的plunkr的这个工作示例 - working plunkr