首頁 > web前端 > js教程 > 主體

詳解AngularJS控制器的使用_AngularJS

WBOY
發布: 2016-05-16 15:11:13
原創
1958 人瀏覽過

控制器在Angularjs中的作用是增強視圖,它實際上就是一個函數,用來為視圖中的作用域添加額外的功能,我們用它來為作用域物件設定初始狀態,並新增自訂行為。

當我們在頁面上建立一個控制器時,Angularjs會產生並傳遞一個$scope給這個控制器,由於Angularjs會自動實例化控制器,所以我們只需要寫建構子。下面的範例展示了控制器初始化:

function my Controller($scope){
 $scope.msg="hello,world!"; 
}
登入後複製

上面這個創建控制器的方法會污染全局命名空間,更合理的辦法是創建一個模組,然後在模組中創建控制器,如下:

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})
登入後複製

用內建指令ng-click可以將按鈕、連結等其他任何DOM元素同點擊事件進行綁定。 ng-click指令將瀏覽器中的mouseup事件,同設定在DOM元素上的事件處理程序綁在一起(例如,當瀏覽器在某個DOM元素上觸發了點擊事件,函數就會被呼叫)。和前面的例子類似,綁定看起來是這樣的:

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>
登入後複製

按鈕和連結都被綁定在了內部$scope的一個操作上,當點擊任何一個元素時AngularJS都會呼叫對應的方法。請注意,當設定呼叫哪個函數時,會同時用括號傳遞一個參數(add(1))

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});
登入後複製

Angularjs與其他框架的最大區別在於,控制器並不適合來執行DOM操作、格式化或資料操作,以及除儲存資料模型之外的狀態維護操作,它只是視圖和$scope之間的橋樑。

控制器巢狀(作用域包含作用域)

AngularJS應用的任何一個部分,無論它渲染在哪個上下文中,都有父級作用域存在。對於ng-app所處的層級來講,它的父級作用域就是$rootScope。

預設情況下,AngularJS在目前作用域中無法找到某個屬性時,便會在父級作用域中進行查找。如果AngularJS找不到對應的屬性,會順著父級作用域一直往上尋找,直到抵達$rootScope為止。如果在$rootScope中也找不到,程式會繼續運行,但視圖無法更新。

透過例子來看一下這個行為。建立一個ParentController,其中包含一個user對象,再建立一個ChildController來引用這個對象:

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
登入後複製

如果我們將ChildController置於ParentController內部,ChildController的$scope物件的父級作用域就是ParentController的$scope物件。根據原型繼承的機制,我們可以在子作用域中存取ParentController的$scope物件。

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,幫助大家熟悉AngularJS控制器。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板