AngularJS之控制器

控制器在Angularjs中的功效是增高视图,它实际上就是四个函数,用来向视图中的功能域添加额外的法力,我们用它来给成效域对象设置初叶状态,并添加自定义行为。

当我们在页面上创立3个控制器时,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中也找不到,程序会持续运维,但视图无法立异。

透过例子来看一下以此作为。创制3个ParentController,在那之中富含一个user对象,再次创下
建3个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对象。依照原型继承的建制,大家得以在子
成效域中做客ParentController的$scope对象。

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

 

相关文章