ng-controller指令和路由中的控制器有什么區別？
[英]What is the difference between an ng-controller directive and a controller in the route?
問題描述
我在AngularJS網站上完成了教程 ，我注意到在第7步 ，它們改變了控制器如何引入應用程序。 最初，他們使用指令：
<body ng-controller="PhoneListCtrl">
...
</body>
但是，它稍后會更改為使用controller屬性作為ng-route 。
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
/* rest of routes here */
這是進行更改的git diff 。 這兩種技術有區別嗎？
5 個解決方案
解決方案1
5 2014-01-29 14:43:24
控制器使用ng-controller指令：
- 在
ng-controller元素上創建一個新的$ scope。 - 顯式的視圖到控制器連接
- 可視與檢查元素等
路線中的控制器：
- 在
ng-view元素上為每個路由創建一個新的$ scope。 - 控制器可以請求路由解析中定義的依賴關系。
- 可選的視圖到控制器連接。 建議使用命名約定將路由映射到控制器到視圖。
解決方案2
1 2014-01-29 14:29:40
ng-view是造成差異的原因。 你真的不能這樣做
<div ng-view ng-controller="PhoneListCtrl">
因為您需要在路線改變時更改該控制器。 所以基本上路由器會為您執行此操作，並使用您在定義路由時指定的控制器。
你可能會這樣做：
<div ng-view>
然后在你的模板中：
<div ng-controller="PhoneListCtrl">
並在您的路線中省略控制器聲明。 我懷疑它會產生基本相同的效果，盡管我從未嘗試過。 雖然可能更適合在這里舉行會議。
解決方案3
1 2014-01-29 14:57:30
Angularjs的一個眾所周知的功能是單頁面應用程序。
如果直接在頁面上分配ng-controller屬性：
<body ng-controller="PhoneListCtrl">
...
</body>
您無法輕松切換控制器以執行其他任務。
因此，使用路由切換控制器是學習Angular Single-Page功能的重要步驟之一。
通過使用route和ng-view指令，您可以擁有相同的布局和一個不同的元素。
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/tablets', {
templateUrl: 'partials/tablet-list.html',
controller: 'TabletListCtrl'
}).
如果'/ phone'
<div ng-view></div>
將包含您的'partials / phone-list.html'模板並將'PhoneListCtrl'設置為div控制器
相同：
如果是'/ tablets'
<div ng-view></div>
將包含您的'partials / tablet-list.html'模板並將'TabletListCtrl'設置為div控制器
這是兩者之間的區別。
解決方案4
0 2014-01-29 14:28:54
在第一種情況下，控制器直接在頁面上。
一旦他們改變它，如果路由是/phones ，那么該控制器僅在頁面上，否則它是基於某些其他路由的其他控制器。
解決方案5
-1 2014-01-29 14:29:57
是的 - 改變是這樣的：
如果要在頁面上顯示特定控制器，則可以使用
<body ng-controller>
但
如果你想做路由（具有多個控制器的應用程序） - 你將需要使用路由+將主體更改為：
<body ng-view></body>
在AngularJS的指令中使用控制器名稱（ng-controller）的表達式
[英]using expression for controller name(ng-controller) in a directive in AngularJS
在同一控制器（ng-controller）的不同實例之間共享數據
[英]Sharing data between different instances of the same controller (ng-controller)
無需“ ng-controller”指令集即可在父級中訪問子級作用域
[英]Child scope accessible in parent without 'ng-controller' directive set
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
具有范圍和ng-controller的自定義angularjs指令
使用ng-controller指令從AngularJS開始
在AngularJS的指令中使用控制器名稱（ng-controller）的表達式
2 ng-controller，需要在它們之間共享數據
ng-controller變量在指令的鏈接函數中不可見
在同一控制器（ng-controller）的不同實例之間共享數據
無需“ ng-controller”指令集即可在父級中訪問子級作用域
AngularJS ng-controller無法正常工作
具有解析功能的 Angularjs ng-controller
評估ng-controller中的表達式
相關標簽