中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

這篇文章主要為大家詳細介紹了AngularJS控制器的使用方法，感興趣的小伙伴們可以參考一下

控制器在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控制器。