不能把ng-controller放在指令上？

Question

我在http://jsfiddle.net/7eL47/3/处有一个非常简单的角度示例。代码的渲染输出在页面上显示“Foobar”。

此渲染输出的模板是：

<div ng-app="myApp" ng-controller="MenuController">
    <unordered-list>
        Foo{{foo}}
    </unordered-list>
</div>

但是，当我将ng-controller的位置更改为unordered-list时，如下所示，“Foobar”不再出现 - 它只是“Foo”。 {{foo}}的值永远不会被“bar”替换。

<div ng-app="myApp">
    <unordered-list ng-controller="MenuController">
        Foo{{foo}}
    </unordered-list>
</div>

为什么当我将ng-controller指令更改为unordered-list元素时，我仍然看不到“Foobar”？

Answer 1

在您的第一个示例中，ngController是unordered-list的父级。因此它具有foo的可见性。

你的第二个例子：

<unordered-list ng-controller="MenuController">

结果为两个兄弟范围，每个范围都有父ngApp。

您的指令和ngController directive都使用scope: true。 scope: true导致为从父级继承的指令创建子范围。因此，你最终得到兄弟范围。

因此，在第二个示例中，$scope.foo不可见，因为它不再在范围unoderedList上继承（而是在兄弟范围内）。