详解AngularJS控制器的使用.pdf

这篇文章主要为大家详细介绍了 AngularJS 控制器的使用方法， 感兴趣的小伙伴们可以 参考一下 控制器在 Angularjs 中的作用是增强视图，它实际就是一个函数，用来向视图中的作用 域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。 当我们在页面上创建一个控制器时， Angularjs 会生成并传递一个 $scope 给这个控制器， 由于 Angularjs 会自动实例化控制器，所以我们只需要写构造函数即可。下面的例子展示了 控制器初始化： function my Controller($scope){ nbsp;$scope.msg=hello,world!;nbsp; } 上面这个创建控制器的方法会污染全局命名空间， 更合理的办法是创建一个模块， 然后 在模块中创建控制器，如下： var myApp=angular.module(myApp,[]); myApp.controller(myController,function($scope){ nbsp;$scope.msg=hello,world!; }) 用内置指令 ng-click 可以将按钮、链接等其他任何 DOM 元素同点击事件进行绑定。 ng-click 指令将浏览器中的 mouseup 事件，同设置在 DOM 元素上的事件处理程序绑定在一 起（例如，当浏览器在某个 DOM 元素上触发了点击事件，函数就会被调用） 。和前面的例 子类似，绑定看起来是这样的： lt;div ng-controller=FirstControllergt; lt;h4gt;The simplest adding machine everlt;/h4gt; lt;button ng-click=add(1) class=buttongt;Addlt;/buttongt; lt;a ng-click=subtract(1) class=button alertgt;Subtractlt;/agt; lt;h4gt;Current count: {{ counter }}lt;/h4gt; lt;/divgt; 按钮和链接都被绑定在了内部 $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 找不到对应