ng-controller 控制器
<!DOCTYPE html><html><header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--引入自己的樣式文件CSS--> <link href="angular_demo1.css" rel="stylesheet"> <!--引入angularJs--> <script src="angular.min.js"></script> <!--引入自己的js文件--> <script src="angualr_demo1.js"></script> <title>angularJsDemo1</title></header><!--模塊 ng-app指令模塊的起始節點，它里面包含的所有控制器都屬于他管理--><body ng-app="myApp"> <!--ng-controller指令即控制器，他所在節點的所有子節點都歸他管，別人無權干涉。--> <div ng-controller="firstController"> <div>按鈕first屬于第一個控制器，被包含在firstController的節點之中,點擊彈出alert框</div> <!-- ng-click angularJs的監聽點擊事件的指令，可以卸載任意標簽上， 該標簽就被設置了點擊監聽，這里設置點擊了按鈕就會調用showAlert()這個方法， 該方法定義在firstController中--> <button ng-click="showAlert()">first</button> </div> <div ng-controller="SecondController"> <!--第二個控制器里也有同樣的按鈕事件，但是對應的控制器中沒有定義這個函數，就不會有任何反應 想要有反應就要在第二個控制器中去定義，這就是控制器?？梢园岩粋€個作用域獨立起來，減少數據過多 導致混亂。一般開發中一個應用對應一個ng-app，應用的入口。在他之下有多個控制器，一個控制器對應一個頁面 這里方便觀察寫在一個頁面中的。--> <button ng-click="showAlert()">second</button> </div></body></html>js/** * Created by wangjiakun on 2016/9/19 0019. */var myApp = angular.module("myApp",[]);// 定義模塊，關聯到ng-app對應的那個模塊中/*.controller(參數1，參數2)；* 參數1：對應頁面的ng-controller指令的等于值* 參數2：回調函數，頁面對應控制器下的所有邏輯操作都這這里編寫；回調函數中的參數個數是可變的* 根據需要進行添加，$scope這個參數必不可少，他代表這個控制器的作用域。* * *//*定義firstController控制器*/myApp.controller("firstController",["$scope","$rootScope",function ($scope,$rootScope) { /*頁面中有個點擊事件函數它屬于第一個控制器，那就該定義在這個控制器的$scope上，即當前的作用域上面*/ $scope.showAlert = function () { alert("firstController"); }; /*$rootScope.showAlert = function () { alert("firstController"); };*/}]);/*定義secondController控制器*/myApp.controller("SecondController",["$scope","$rootScope",function ($scope,$rootScope) { $scope.showAlert = function () { alert("SecondController"); };}]);/** $scope和$rootScope* 控制器中的回調函數中寫了兩個參數，說一下他們的區別。* $scope使當前的控制器所管轄的作用域，不在我控制器范圍內的節點，是沒有權限拿到我控制器中定義的數據和方法的。* $rootScope是指的應用這個模塊（ng-app）對應的作用域，相當于全局變量。定義在它上面的數據和方法，他的子作用域都可以訪問。*像上面的例子，兩個控制器的作用域都屬于$rootScope 的子作用域，仔細看一下，兩個控制器都是在myApp這個變量下定義的，myApp對應的* 又是ng-app這個指令所對應的模塊。上例中可以把第二個控制器中的$$scope.showAlert方法注釋掉，應為參數中引入了rootScope，第二個按鈕就會* 調用第一個控制器中的showAlert方法，當然，第一個控制器中的這個方法要定義在$rootScope上。* * 定義在$rootScope上的數據和方法，myApp下的所有控制器中都可以訪問，當該控制器中有相同的方法數據時，就會優先是調用當前作用* 域的數據和方法。** */完整例子在附件！主要了解作用域，模塊和控制器概念
新聞熱點
疑難解答
