AngularJs學習第五篇從Controller控制器談談$scope作用域

更新時間：2016年06月08日 10:00:41 作者：Company

這篇文章主要介紹了AngularJs(五）從Controller控制器談談$scope作用域的相關資料,需要的朋友可以參考下

Controller的創(chuàng)建

AngularJs controller使用無處不在，在里代碼演示比較簡單的創(chuàng)建工作。

<!DOCTYPE html>
<html xmlns="http://www.w.org//xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title>App</title>
<script src="angular.js"></script>
<link href="bootstrap-theme.css" rel="stylesheet" />
<link href="bootstrap.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.setInput = function (value) {
console.log("print：" + value);
}
});
</script>
</head>
<body ng-controller="defaultCtrl"> 
<div class="well">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
</body>
</html>

　　在這控制很簡單，首先我在html 中添加了 ng-app 屬性，表示module的作用范圍。

在 body 中添加了 ng-controller 表示 defaultCtrl 控制器的作用范圍。

input 便簽中ng-model 指令的是綁定數據，雙向數據綁定（MVVM）。

$scope 是AngularJs內置的作用域。

此實例的只是把輸入的值打印到控制臺中，如圖：

僅此而已，簡單吧。

多個控制器controller作用域問題

現在我們來改造下程序，

<body >
<div class="well" ng-controller="defaultCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
<div class="well" ng-controller="defaultCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
</body>

　　其余代碼不變，我只是把放到body 中的屬性 ng-controller 放到了兩個div中。我重用了defaultCtrl控制器，猜想下，如果我在第一個input標簽輸入內容，我點擊第二個控制器的button按鈕，會出現你所期望的結果嗎?

結果是否和你想你的一樣呢，大家可以看到這個結果為undefined. 在個很好解釋，應為他們的作用域不同，雖然你重復使用了統(tǒng)一控制器，但是在創(chuàng)建作用域確實不同的。

調用的工廠函數會返回不同的作用域。

那么如何進行不同作用域之間的訪問呢，在Angularjs中對于作用域訪問有個$rootScope 。

在這里有三個函數需要介紹下，

$on(name,handler) 注冊一個事件處理函數，該函數在特定的事件被當前作用域收到時將被調用。

$emit(name,args) 向當前父作用域發(fā)送一個事件，直至根作用域。

$broadcast(name,args) 向當前作用域下的子作用域發(fā)送一個事件，參數是事件名稱以及一個用于作用向事件提供額外數據的對象。

現在來更改下代碼：

<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope,$rootScope) {
$scope.$on("UpdateValue", function (event, args) {
$scope.input = args.zip;
});
$scope.setInput = function (value) {
$rootScope.$broadcast("UpdateValue", { zip: value });
console.log("print：" + $scope.input);
}
$scope.copy = function () {
console.log("copy：" + $scope.input);
};
});
</script> 
<div class="well" ng-controller="defaultCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
</div>

　　在段代碼中我添加了幾個函數，同時改變了第二個控制器的函數。

結果：

確實發(fā)生了。

controller繼承

<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope, $rootScope) {
//$scope.$on("UpdateValue", function (event, args) {
// $scope.input = args.zip;
//});
$scope.setInput = function (value) {
//$rootScope.$broadcast("UpdateValue", { zip: value });
$scope.input = value;
console.log("print：" + $scope.input);
}
$scope.copy = function () {
console.log("copy：" + $scope.input);
};
})
.controller("simpleCtrl", function ($scope) {
$scope.copy = function () {
console.log("copy：" + $scope.input);
};
});
</script>
<body ng-controller="defaultCtrl">
<div class="well">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="setInput(value)">Click</button>
</div>
</div>
<div class="well" ng-controller="simpleCtrl">
<h>Count</h>
<div class="form-group">
<input class="form-control" required ng-model="value" />
<button ng-click="copy()">Copy</button>
</div>
</div>
</body>

　　我添加了一個控制器，simpleCtrl 仔細觀察下，發(fā)現defaultCtrl 包含了simpleCtrl 中，所以作用simple 也繼承了。

結果圖：發(fā)下我在第一個窗中輸入時，第二個也變了，應為都是同一個value。