不能把控制器放在指令上？

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}}的值永遠不會被「bar」替代。

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

爲什麼我看不到「Foobar的」還是當我改變ng-controller指令是unordered-list元素？

Answer 1

在您的第一個示例中，ngController是unordered-list的父級。所以它對foo有可見性。

你的第二個例子：

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

結果2兄弟作用域每個與ngApp父。

您的指令和ngController directive都使用scope: true。 scope: true會導致爲從該父項繼承的該指令創建子範圍。因此，您最終會看到兄弟範圍。

因此，在第二個示例中，$scope.foo不可見，因爲它不再位於範圍unoderedList繼承範圍內（而是在同級範圍內）。