angularJS 控制器

控制器:

AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。
在页面上创建一个新的控制器时, AngularJS会生成并传递一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。由于AngularJS会负责处理控制器的实例化过程,我们只需编写构造函数即可。
一个小例子:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>

    <div class="panel-body" ng-controller="MyController">   
        <input type="button" ng-click="add()" value="点击一下"><br>
        <span>{{count}}</span>
    </div>

app.js

angular.module('testmodule',[])
              .controller("MyController",['$scope',function($scope){
                  $scope.count=0;
                  $scope.add = function(){
                      $scope.count++;
                  }
}]);

控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制器是很好的做法。作为AngularJS开发者,使用依赖注入来访问服务可以实现这个目的

AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。AngularJS允许在$scope上设置包括对象在内的任何类型的数据,并且在视图中还可以展示对象的属性。

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

AngularJS应用的任何一个部分,无论它渲染在哪个上下文中,都有父级作用域存在。对于ng-app所处的层级来讲,它的父级作用域就是$rootScope。
有一个例外:在指令内部创建的作用域被称作孤立作用域。

除了孤立作用域外,所有的作用域都通过原型继承而来,也就是说它们都可以访问父级作用域。
默认情况下, AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找。如果AngularJS找不到对应的属性,会顺着父级作用域一直向上寻找,直到抵达$rootScope为止。如果在$rootScope中也找不到,程序会继续运行,但视图无法更新。

将ChildController置于ParentController内部,那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制,我们可以在子作用域中访问ParentController的$scope对象

<div  ng-controller="ParentController">
    <div ng-controller="ChildController">
        <input type="button" ng-click="add()" value="点击一下">
        <span>{{count}}</span>    
    </div>                    
</div> 

APP.JS

var app = angular.module("app",[]);
app.controller("ParentController",['$scope',function($scope){
                  $scope.count = {"name": 'Joke','age':22};
}]);
app.controller("ChildController",['$scope',function($scope){
                  $scope.add = function(){
                      $scope.count.age++;
                  }
 }]);


原文地址:https://www.cnblogs.com/a-lonely-wolf/p/5750740.html