控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。
当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可。下面的例子展示了控制器初始化:
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对象。根据原型继承的机制,我们可以在子作用域中访问ParentController的$scope对象。
<div ng-controller="ParentController"> <div ng-controller="ChildController"> <a ng-click="sayHello()">Say hello</a> </div> {{ person }} </div>
以上是我对控制器的了解,希望大家指教。
相关推荐
主要介绍了AngularJS控制器之间的通信方式,结合实例形式分析了作用域继承方式、事件方式及angular服务方式等常用的通信方式,需要的朋友可以参考下
主要介绍了AngularJS 控制器 controller的详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法。分享给大家供大家参考,具体如下: 之前的文章《AngularJS入门示例之Hello World详解》,很简单的就实现了模型数据和页面显示的自动绑定。现在...
本文给大家介绍AngularJS控制器继承自另一控制器的相关内容,小编认为介绍的非常不错,具有参考借鉴价值,感兴趣的朋友参考下吧
一种按需加载 AngularJS 控制器的方法。 这是一种在需要时加载 AngularJS 控制器的方法。 当控制器被请求时,它将通过 xhr 加载脚本。 版本 0.0.3 都多的 添加测试 添加带有版本控制的离线存储 - 这个想法是在加载...
本文详细介绍了AngularJS控制器之间的数据共享与通信,对angularjs共享数据及通信相关知识感兴趣的朋友可以一起学习。
主要为大家详细介绍了AngularJS控制器的使用方法,感兴趣的小伙伴们可以参考一下
本文主要介绍AngularJS控制器,这里整理了控制器的相关资料和提供示例代码及实例效果图,有需要的小伙伴可以参考下
AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 名: 姓: 姓名: {{firstName + " " + ...
在本文中,我们将学习在AngularJS控制器中实现依赖注入。
下面小编就为大家带来一篇详谈AngularJs 控制器、数据绑定、作用域。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 <!DOCTYPE html> <html> <...
Github-View-AngularJS 这是一个搜索github用户信息的项目。 哪里angularjs键。 这是angularJS控制器,模块,指令,服务和路由的良好实践。
该页面包含4个div,每个div均由其自己的控制器控制,所有控制器均通过该服务共享数据。 中间的div包含一个嵌套的控制器。 当页面上有多个控制器时,此模式很有用,其中一些控制器需要知道何时更改了由另一个控制器...