在Angularjs中用ng-controller指令定义了应用程序中的控制器；例如：
<div ng-app="myApp" ng-controller="myCtrl"> 姓: <input type="text" ng-model="firstName"><br> 名: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>
在控制器中，可以定义方法和属性，而且一个页面可以有多个控制器，并且控制器是可以嵌套的。例如：
<html ng-app="myApp"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="CommonController"> <div ng-controller="Controller1"> <p>{{greeting.text}},Angular</p> <button ng-click="test1()">test1</button> </div> <div ng-controller="Controller2"> <p>{{greeting.text}},Angular</p> <button ng-click="test2()">test2</button> <button ng-click="commonFn()">通用</button> </div> </div> </body> <script src="js/angular-1.3.0.js"></script> </html>
控制器CommonController中定义了Controller1和控制器Controller2，Controller1,Controller2可以调用自己定义的方法和属性,如果不存在，则也可以调用CommonController中的方法和属性；所以可以把公共的定义在CommonControlle中
var app=angular.module("myApp",[]); app.controller("CommonController",function($scope){ $scope.commonFn=function(){ alert("这是通用的"); } $scope.greeting={ text:"common" } }) app.controller("Controller1",function($scope){ $scope.greeting={ text:"test11" }; $scope.test1=function(){ alert("这是test1方法"); } }); app.controller("Controller2",function($scope){ // $scope.greeting={ // text:"test22" // }; $scope.test2=function(){ alert("这是test2"); } });
$emit和$broadcast的区别
$emit 只可以向自身以及父级传播事件；
$broadcast 只可以向自身以及子节点传播事件；
例如：
<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="Scope1.css" /> </head> <body> <div ng-controller="EventController"> Root scope <tt>MyEvent</tt> count: {{count}} <ul> <li ng-repeat="i in [1]" ng-controller="EventController"> <button ng-click="$emit('MyEvent')"> $emit('MyEvent') </button> <button ng-click="$broadcast('MyEvent')"> $broadcast('MyEvent') </button> <br> Middle scope <tt>MyEvent</tt> count: {{count}} <ul> <li ng-repeat="item in [1, 2]" ng-controller="EventController"> Leaf scope <tt>MyEvent</tt> count: {{count}} </li> </ul> </li> </ul> </div> </body> <script src="js/angular-1.3.0.js"></script> <script type="text/javascript"> // function EventController($scope){ // $scope.count=0; // $scope.$on("MyEvent",function(){ // $scope.count++; // }) // } var app=angular.module("myApp",[]); app.controller("EventController",function($scope){ $scope.count=0; $scope.$on("MyEvent",function(){ $scope.count++; }); }); </script> </html>