您的位置：首页 > Web前端 > JavaScript

Angular Js 控制器

2016-03-13 16:55 351 查看

在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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航