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指令模塊的起始節(jié)點(diǎn)，它里面包含的所有控制器都屬于他管理--><body ng-app="myApp"> <!--ng-controller指令即控制器，他所在節(jié)點(diǎn)的所有子節(jié)點(diǎn)都?xì)w他管，別人無權(quán)干涉。--> <div ng-controller="firstController"> <div>按鈕first屬于第一個(gè)控制器，被包含在firstController的節(jié)點(diǎn)之中,點(diǎn)擊彈出alert框</div> <!-- ng-click angularJs的監(jiān)聽點(diǎn)擊事件的指令，可以卸載任意標(biāo)簽上， 該標(biāo)簽就被設(shè)置了點(diǎn)擊監(jiān)聽，這里設(shè)置點(diǎn)擊了按鈕就會(huì)調(diào)用showAlert()這個(gè)方法， 該方法定義在firstController中--> <button ng-click="showAlert()">first</button> </div> <div ng-controller="SecondController"> <!--第二個(gè)控制器里也有同樣的按鈕事件，但是對(duì)應(yīng)的控制器中沒有定義這個(gè)函數(shù)，就不會(huì)有任何反應(yīng) 想要有反應(yīng)就要在第二個(gè)控制器中去定義，這就是控制器。可以把一個(gè)個(gè)作用域獨(dú)立起來，減少數(shù)據(jù)過多 導(dǎo)致混亂。一般開發(fā)中一個(gè)應(yīng)用對(duì)應(yīng)一個(gè)ng-app，應(yīng)用的入口。在他之下有多個(gè)控制器，一個(gè)控制器對(duì)應(yīng)一個(gè)頁面 這里方便觀察寫在一個(gè)頁面中的。--> <button ng-click="showAlert()">second</button> </div></body></html>js/** * Created by wangjiakun on 2016/9/19 0019. */var myApp = angular.module("myApp",[]);// 定義模塊，關(guān)聯(lián)到ng-app對(duì)應(yīng)的那個(gè)模塊中/*.controller(參數(shù)1，參數(shù)2)；* 參數(shù)1：對(duì)應(yīng)頁面的ng-controller指令的等于值* 參數(shù)2：回調(diào)函數(shù)，頁面對(duì)應(yīng)控制器下的所有邏輯操作都這這里編寫；回調(diào)函數(shù)中的參數(shù)個(gè)數(shù)是可變的* 根據(jù)需要進(jìn)行添加，$scope這個(gè)參數(shù)必不可少，他代表這個(gè)控制器的作用域。* * *//*定義firstController控制器*/myApp.controller("firstController",["$scope","$rootScope",function ($scope,$rootScope) { /*頁面中有個(gè)點(diǎn)擊事件函數(shù)它屬于第一個(gè)控制器，那就該定義在這個(gè)控制器的$scope上，即當(dāng)前的作用域上面*/ $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* 控制器中的回調(diào)函數(shù)中寫了兩個(gè)參數(shù)，說一下他們的區(qū)別。* $scope使當(dāng)前的控制器所管轄的作用域，不在我控制器范圍內(nèi)的節(jié)點(diǎn)，是沒有權(quán)限拿到我控制器中定義的數(shù)據(jù)和方法的。* $rootScope是指的應(yīng)用這個(gè)模塊（ng-app）對(duì)應(yīng)的作用域，相當(dāng)于全局變量。定義在它上面的數(shù)據(jù)和方法，他的子作用域都可以訪問。*像上面的例子，兩個(gè)控制器的作用域都屬于$rootScope 的子作用域，仔細(xì)看一下，兩個(gè)控制器都是在myApp這個(gè)變量下定義的，myApp對(duì)應(yīng)的* 又是ng-app這個(gè)指令所對(duì)應(yīng)的模塊。上例中可以把第二個(gè)控制器中的$$scope.showAlert方法注釋掉，應(yīng)為參數(shù)中引入了rootScope，第二個(gè)按鈕就會(huì)* 調(diào)用第一個(gè)控制器中的showAlert方法，當(dāng)然，第一個(gè)控制器中的這個(gè)方法要定義在$rootScope上。* * 定義在$rootScope上的數(shù)據(jù)和方法，myApp下的所有控制器中都可以訪問，當(dāng)該控制器中有相同的方法數(shù)據(jù)時(shí)，就會(huì)優(yōu)先是調(diào)用當(dāng)前作用* 域的數(shù)據(jù)和方法。** */完整例子在附件！主要了解作用域，模塊和控制器概念
新聞熱點(diǎn)
疑難解答
圖片精選
