详解AngularJS控制器的使用_鸿宇娱乐平台 

玩法介绍当前位置:鸿宇娱乐 > 玩法介绍 > >

详解AngularJS控制器的使用

  

[AngularJS,控制器]详解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元素上触发了点击事件,函数就会被调用)。和前面的例子类似,绑定看起来是这样的:  

  
  
  
  

The simplest adding machine ever

    Subtract  

Current count: {{ counter }}

  
  
  
  

按钮和链接都被绑定在了内部$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对象。

  

  
  
  
  
  Say hello  
  {{ person 鸿宇娱乐平台 }}  
  
  
  

以上就是本文的全部内容,希望对大家的学习有所帮助,帮助大家熟悉AngularJS控制器。

  

(责任编辑:admin)

上一篇:Jquery实现点击按钮,连续地向textarea中添加值的实

下一篇:1.8动画(Animation)

推荐内容

客户服务热线

010-400-12345

在线客服