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 指令的是綁定數(shù)據(jù)，雙向數(shù)據(jù)綁定（MVVM）。
$scope 是AngularJs內(nèi)置的作用域。
此實例的只是把輸入的值打印到控制臺中，如圖：
僅此而已，簡單吧。
多個控制器controller作用域問題
現(xiàn)在我們來改造下程序，
<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標簽輸入內(nèi)容，我點擊第二個控制器的button按鈕，會出現(xiàn)你所期望的結(jié)果嗎?
結(jié)果是否和你想你的一樣呢，大家可以看到這個結(jié)果為undefined. 在個很好解釋，應(yīng)為他們的作用域不同，雖然你重復(fù)使用了統(tǒng)一控制器，但是在創(chuàng)建作用域確實不同的。
調(diào)用的工廠函數(shù)會返回不同的作用域。
那么如何進行不同作用域之間的訪問呢，在Angularjs中對于作用域訪問有個$rootScope 。
在這里有三個函數(shù)需要介紹下，
$on(name,handler) 注冊一個事件處理函數(shù)，該函數(shù)在特定的事件被當前作用域收到時將被調(diào)用。
$emit(name,args) 向當前父作用域發(fā)送一個事件，直至根作用域。
$broadcast(name,args) 向當前作用域下的子作用域發(fā)送一個事件，參數(shù)是事件名稱以及一個用于作用向事件提供額外數(shù)據(jù)的對象。
現(xiàn)在來更改下代碼：
<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> 在段代碼中我添加了幾個函數(shù)，同時改變了第二個控制器的函數(shù)。
結(jié)果：
確實發(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ā)現(xiàn)defaultCtrl 包含了simpleCtrl 中，所以作用simple 也繼承 了。
結(jié)果圖：發(fā)下我在第一個窗中輸入時，第二個也變了，應(yīng)為都是同一個value。
$scope 作用域問題，在使用controller時 要明白其作用域。
新聞熱點
疑難解答
