Angularjs 嵌套指令范围

Question

请参考Plunker。问题：当我在主控制器中使用 item-over 指令时，它会触发良好的 OnOver。这工作正常：

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

但是当我把它放在列表视图指令中时，它不会触发控制器的 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

Angularjs nested directives scopes