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下的所有控制器中都可以访问，当该控制器中有相同的方法数据时，就会优先是调用当前作用* 域的数据和方法。** */完整例子在附件！主要了解作用域，模块和控制器概念
新闻热点
疑难解答
