AngularJS之控制器

控制器在Angularjs中的用意是增高视图,它实际上就是是一个函数,用来向视图中之作用域添加额外之作用,我们就此其来受作用域对象设置初始状态,并上加于定义行为。

当我们当页面及创设一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们就需要写构造函数即可。下面的事例展示了控制器初始化:

function my Controller($scope){
  $scope.msg="hello,world!";  
}

点这个创造控制器的道会污染全局命名空间,更合理的措施是开创一个模块,然后在模块中创造控制器,如下:

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
  $scope.msg="hello,world!";
})

就此内置指令ng-click可以以按钮、链接等其他任何DOM元素与点击事件进展绑定。ng-click指
教将浏览器中之mouseup事件,同安于DOM元素上的事件处理程序绑定以一块儿(例如,当浏览器
当有DOM元素上接触了点击事件,函数就会叫调用)。和前面的例子类似,绑定看起是这般的:

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

按钮和链接都吃绑定以了内$scope的一个操作上,当点击任何一个素时AngularJS都见面
调用相应的办法。注意,当装调用哪个函数时,会又用括号传递一个参数(add(1))

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

Angularjs与外框架的极其老分别在,控制器并无相符来实施DOM操作、格式化或数量操作,以及除存储数据模型之外的状态维护操作,它只是是视图和$scope之间的桥。

控制器嵌套(作用域包含作用域)

 

AngularJS应用之其他一个片段,无论它渲染在哪个上下文中,都起父级作用域存在。对于
ng-app所处之层级来讲,它的父级作用域就是$rootScope。

默认情况下,AngularJS在时作用域中无法找到有属性时,便会于父级作用域中展开查看
搜。如果AngularJS找不顶相应的性能,会沿着父级作用域一直发展寻找,直到到$rootScope
终结。如果当$rootScope中也查找不交,程序会继续运行,但视图无法创新。

经过例子来拘禁一下此作为。创建一个ParentController,其中带有一个user对象,再创
建造一个ChildController来引用这目标:

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

若果我们将ChildController置于ParentController内部,那ChildController的$scope
目标的父级作用域就是ParentController的$scope对象。根据原型AngularJS继承的编制,我们可在子
作用域中走访ParentController的$scope对象。

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

 

相关文章