AngularJS 精妙绝伦的控制器

学习要点：

  • 为什么使用控制器
  • 基本原理
    • 创建使用控制器
    • 作用域
  • 组织控制器
    • 单块控制器
    • 复用控制器
    • 控制器继承
    • 多控制器
  • 无作用域控制器
  • 显示更新控制器–使用JQuery UI

为什么使用控制器？

控制器就像领域模型和视图的纽带，它从模型中暴露数据给视图，它给视图提供数据与服务，并且定义了所需的业务逻辑，从而将用户行为转换为模型上的变化。

一、理解基本原理

控制器是通过NG的Module.controller来创建的，它接受一个控制器名称和一个工厂函数，这个工厂函数内部有一个$scope服务，用于向视图提供作用域，我们也正是通过修改$scope来修改控制器的作用的

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<!-- 使用控制器 -->
<body ng-controller="defaultCtrl">
<div class="well">
    <!-- 下拉列表每次选择都会更替city值 -->
    <select ng-options="city for city in cities" ng-model="city"></select>
</div>
<div class="well" >
    <p>The City is: {{city}}</p>
    <!-- 调用getCountry()方法 -->
    <p>The country is: {{getCountry(city) || "Unkonwn"}}</p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
    // define a controller named defaultCtrl
    .controller(‘defaultCtrl‘, function ($scope) {
        // 数据模型集合
        $scope.cities = ["London", "New York", "Paris"];
        // 显示的模型
        $scope.city = "London";
        // 通过city显示国家
        $scope.getCountry = function (city) {
            switch (city) {
                case ‘London‘:
                    return "UK";
                case ‘New York‘:
                    return "USA";
            }
        }
    })
</script>
</body>
</html>

第一步：利用Module.controller方法创建了控制器，接着在视图中使用控制器ng-controller

第二步：利用$scope服务设置控制器的作用域，向视图暴露数据

第三步：在视图中双向数据绑定ng-model数据city，通过选择下拉菜单修改$scope.city的值，从而达到修改作用域的目的。

二、组织控制器

1.单块控制器，简单点，就是整个视图只是使用一个控制器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <style>

    </style>
</head>
<body>
<!-- 第一次使用 -->
<div class="well" ng-controller="defaultCtrl">
    <h4>Billing Zip Code</h4>
    <div class="form-group">
        <input class="form-control" ng-model="billingZip">
    </div>
    <button class="btn btn-primary" ng-click="setAddress(‘billingZip‘, billingZip)">Save Billing</button>
</div>
<!-- 第二次使用，但是两个作用域不能互通 -->
<div class="well"  ng-controller="defaultCtrl">
    <h4>shipping Zip Code</h4>
    <div class="form-group">
        <input class="form-control" ng-model="zip">
    </div>
    <button class="btn btn-primary" ng-click="copyAddress()">Copy Billing</button>
    <button class="btn btn-primary" ng-click="setAddress(‘shippingZip‘, zip)">Save Shipping</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
    // define a controller named defaultCtrl
    .controller(‘defaultCtrl‘, function ($scope) {
        $scope.address = {};
        $scope.setAddress = function (type, zip) {
            console.log("Type: " + type + " " + zip);
            $scope.address[type] = zip;
        }
        $scope.copyAddress = function () {
            // 这里两个数据不能够通讯，因为他们来自不同的作用域，虽然他们使用同一个控制器
            $scope.shippingZip = $scope.billingZip;
        }
    })
</script>
</body>
</html>

控制器在视图中使用的两次，相应的他们虽然数据模型相同但是作用域不同，展示不可用进行通讯

接下来，我们要跨作用域实现通信

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <style>

    </style>
</head>
<body>
<!-- 第一次使用 -->
<div class="well" ng-controller="defaultCtrl">
    <h4>Billing Zip Code</h4>
    <div class="form-group">
        <input class="form-control" ng-model="billingZip">
    </div>
    <button class="btn btn-primary" ng-click="setAddress(‘billingZip‘, billingZip)">Save Billing</button>
</div>
<!-- 第二次使用，但是两个作用域不能互通 -->
<div class="well"  ng-controller="defaultCtrl">
    <h4>shipping Zip Code</h4>
    <div class="form-group">
        <input class="form-control" ng-model="zip">
    </div>
    <button class="btn btn-primary" ng-click="copyAddress()">Copy Billing</button>
    <button class="btn btn-primary" ng-click="setAddress(‘shippingZip‘, zip)">Save Shipping</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
    // define a controller named defaultCtrl
    .controller(‘defaultCtrl‘, function ($scope, $rootScope) {
        $scope.$on("zipCodeUpdated", function (event, args) {
            $scope[args.type] = args.zipCode;
            console.log($scope[args.type] + ", " + args.zipCode);
        })
        $scope.setAddress = function (type, zip) {
            // 向下传播zipCodeUpdated事件
            $rootScope.$broadcast("zipCodeUpdated", {
                type : type,
                zipCode : zip
            })
            console.log("Type: " + type + " " + zip);
        }
        // 把billingZip赋值给zip
        $scope.copyAddress = function () {
            $scope.zip = $scope.billingZip;
            console.log($scope.zip);
        }
    })
</script>
</body>
</html>

原理解析：

第一步：当Save Billing按钮被点击后，会触发setAddress(‘billingZip’, billingZip)方法，传递的值为billingZip和billingZip输入框的值(这里假设为zhang)，即type : ‘billingZip’, zip : ‘zhang’

第二步：接着，$rootScope就向下级作用域发送了一个名为zipCodeUpdated的事件，且携带一个对象参数，即type : ‘billingZip’, zipCode : ‘zhang’

这时其他的局部视图就拥有了zipCodeUpdated事件的对象值

第三步：这时你再点击Copy Billing按钮，它会触发copyAddress方法，且把billingZip值赋给zip之后zip被双向绑定值了，我们可以看出来

第四步：最后点击Save Shipping按钮，就可以再次触发setAddress(‘shippingZip’, zip)事件，且传递了新的type和zip值

同时，我们还可以使用服务来调节作用域事件

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <style>

    </style>
</head>
<body>

<div class="well" ng-controller="defaultCtrl">
    <h4>Billing Zip Code</h4>
    <div class="form-group">
        <input class="form-control" ng-model="billingZip">
    </div>
    <button class="btn btn-primary" ng-click="setAddress(‘billingZip‘, billingZip)">Save Billing</button>
</div>

<div class="well"  ng-controller="defaultCtrl">
    <h4>shipping Zip Code</h4>
    <div class="form-group">
        <input class="form-control" ng-model="zip">
    </div>
    <button class="btn btn-primary" ng-click="copyAddress()">Copy Billing</button>
    <button class="btn btn-primary" ng-click="setAddress(‘shippingZip‘, zip)">Save Shipping</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
    .service("ZipCodes", function ($rootScope) {
        return {
            setZipCode : function (type, zip) {
                this[type] = type;
                $rootScope.$broadcast("zipCodeUpdated", {
                    type : type,
                    zipCode : zip
                })
            }
        }
    })
    // define a controller named defaultCtrl
    .controller(‘defaultCtrl‘, function ($scope, $rootScope) {
        // 原理解析：
        // 第一步：单击Save Billing按钮，触发setAddress，携带参数shippingZip和zhang(这里假设用户输入的为zhang)
        // 第二步：在setAddress方法内部调用了ZipCodes服务返回的setZipCode方法，携带参数type=shippingZip 和 zip=zhang
        // 第三步：setZipCode方法中依赖注入了$rootScope顶层作用域，且该顶层作用域向下面的每个视图作用域发送了一个zipCodeUpdated事件，且携带参数type=shippingZip 和 zipCode=zhang
        // 第四步：zipCodeUpdated事件处理函数将接受的数据，重新依赖注入到$scope中，
        // 这里，即为$scope[args.type(billingZip)] = $scope.billingZip = args.zipCode(zhang) = zhang
        // 即，$scope.billingZip = zhang
        // 第五步：单击Copy Billing按钮，触发copyAddress事件，就可以将$scope.billingZip赋值给$scope.zip，且zip进行了双向数据绑定
        // 第六步：单击Save Shipping按钮，触发setAddress事件，携带‘shippingZip‘和zip，也就是可以完成复制功能了
        $scope.$on("zipCodeUpdated", function (event, args) {
            $scope[args.type] = args.zipCode;
            console.log($scope[args.type] + ", " + args.zipCode);
        })
        $scope.setAddress = function (type, zip) {
            ZipCodes.setZipCode(type, zip);
            console.log("Type: " + type + " " + zip);
        }
        // 把billingZip赋值给zip
        $scope.copyAddress = function () {
            $scope.zip = $scope.billingZip;
        }
    })

</script>
</body>
</html>

3.使用控制器继承，类似于类的继承

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <style>

    </style>
</head>
<body ng-controller="topCtrl">
<div class="well">
    <h4>Top Level Controller</h4>
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="reverseText()">Reverse</button>
            <button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
        </span>
        <input class="form-control" ng-model="data.dataValue">
    </div>
</div>

<div class="well" ng-controller="firstChildCtrl">
    <h4>First Child Controller</h4>
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="reverseText()">Reverse</button>
            <button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
        </span>
        <input class="form-control" ng-model="data.dataValue">
    </div>
</div>

<div class="well" ng-controller="secondChildCtrl">
    <h4>Second Child Controller</h4>
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="reverseText()">Reverse</button>
            <button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
            <button class="btn btn-default" type="button" ng-click="shift()">Shift</button>
        </span>
        <input class="form-control" ng-model="data.dataValue">
    </div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
// 定义父类控制器
app.controller(‘topCtrl‘, function ($scope) {
    $scope.data = {
        dataValue : "Zhang San Is My Best Friend"
    }
    // PS : 在对象中定义变量，利用数据共享
    // 理解数据继承---NG对作用域上的数据值的继承处理方式，以及如何受ng-model影响的
    // 读取属性值：当前作用域->父级作用域...->顶级作用域
    // ng-model指令修改属性值：当前作用域，如果没有，隐藏该属性
    // 反转字体顺序
    $scope.reverseText = function () {
        $scope.data.dataValue = $scope.data.dataValue.split(" ").reverse().join(" ");
    }
    // 调整单词大小写---第2n个单词大写
    $scope.changeCase = function () {
        var result = [];
        angular.forEach($scope.data.dataValue.split(" "), function (char, index) {
            // console.log(char + ", " + index);
            result.push(index % 2 == 1 ? char.toString().toUpperCase() : char.toString().toLowerCase());
        });
        $scope.data.dataValue = result.join(" ");
    }
});
// 第一个子类控制器
app.controller(‘firstChildCtrl‘, function ($scope) {
    // 重写
    $scope.changeCase = function () {
        $scope.data.dataValue = $scope.data.dataValue.toUpperCase();
    };
});
// 第二个子类控制器
app.controller(‘secondChildCtrl‘, function ($scope) {
    $scope.changeCase = function () {
        $scope.data.dataValue = $scope.data.dataValue.toLowerCase();
    };
    // 前四个单词大写---拓展
    $scope.shift = function () {
        var result = [];
        angular.forEach($scope.data.dataValue.split(" "), function (char, index) {
            result.push(index < 4 ? char.toUpperCase() : char);
        });
        $scope.data.dataValue = result.join(" ");
    }
});
</script>
</body>
</html>

第一步：先后定义三个控制器父类控制器topCtrl、子类控制器firstChildCtrl和secondChildCtrl。

父类中定义了反转字体顺序reverseText()方法和调整单词大小写changeCase()方法；

子类firstChildCtrl继承了父类的reverseText()方法，并且重写了changeCase()方法；

子类secondChildCtrl继承了父类的reverseText()方法，并且重写了changeCase()方法，扩展了新方法shift()

第二步：目前三个控制器还是互相独立的，我们需要使用控制器继承，只需要在父类视图中，添加子类控制器即可

注意：

NG对作用域上的数据值的继承处理方式，以及如何受ng-model影响的

读取属性值：当前作用域->父级作用域…->顶级作用域

ng-model指令修改属性值：当前作用域，如果没有，隐藏该属性

案例中，我们使用对象中添加属性，利用原型实现了共享

接下来，我们看看效果图

4.使用多个控制器

很简单，前面我们已经使用过了！

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="well" ng-controller="firstChildCtrl">
    <h4>First Child Controller</h4>
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
        </span>
        <input class="form-control" ng-model="dataValue">
    </div>
</div>

<div class="well" ng-controller="secondChildCtrl">
    <h4>Second Child Controller</h4>
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="changeCase()">Case</button>
            <button class="btn btn-default" type="button" ng-click="shift()">Shift</button>
        </span>
        <input class="form-control" ng-model="dataValue">
    </div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
    // define a controller named defaultCtrl

app.controller(‘firstChildCtrl‘, function ($scope) {
    $scope.dataValue = "Zhang San";
    // 重写
    $scope.changeCase = function () {
        $scope.dataValue = $scope.dataValue.toUpperCase();
    };
});
app.controller(‘secondChildCtrl‘, function ($scope) {
    $scope.dataValue = "Li Si";
    $scope.changeCase = function () {
        $scope.dataValue = $scope.dataValue.toLowerCase();
    };
    // 前四个单词大写---拓展
    $scope.shift = function () {
        var result = [];
        angular.forEach($scope.dataValue.split(" "), function (char, index) {
            result.push(index < 4 ? char.toUpperCase() : char);
        });
        $scope.dataValue = result.join(" ");
    }
});
</script>
</body>
</html>

5.使用无作用域的控制器

当你的作用域不需要复杂、没错继承的好处的必要、不需要控制器之间的通讯，那么可以使用无作用域的控制器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<!-- 需要将指定代表控制器的变量名，这里为top -->
<div class="well" ng-controller="topCtrl as top">
    <h4>Top Level Controller</h4>
    <div class="input-group">
        <span class="input-group-btn">
            <!-- 调用时用top.属性和top.方法的形式 -->
            <button class="btn btn-default" type="button" ng-click="top.reverseText()">Reverse</button>
        </span>
        <input class="form-control" ng-model="top.dataValue">
    </div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
    // define a controller named defaultCtrl
app.controller(‘topCtrl‘, function () {
    // 当你的作用域不需要复杂、没错继承的好处的必要、不需要控制器之间的通讯，那么可以使用无作用域的控制器
    // 标志为：不要注册依赖，即去除$scope，用this代替
    this.dataValue = "Zhang San";
    this.reverseText = function () {
        this.dataValue = this.dataValue.split(" ").reverse().join(" ");
    }
});
</script>
</body>
</html>

6.显示更新作用域

将AngularJS与另外的JS框架集成起来，例如我们将要说到的jQuery UI，我们将实现两个框架作用域的通讯

NG给出了三个方法：

什么意思呢？我们将在案例中详解

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angular Directive</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>

<div id="ngRegion" class="well" ng-controller="topCtrl">
    <h4>AngularJS</h4>
    <div class="chexbox">
        <label>
            <input type="checkbox" ng-model="buttonEnabled"> Enable Button
        </label>
    </div>
    Click Count : {{clickCounter || "0"}}
</div>

<div id="jqui" class="well">
    <h4>JQuery UI</h4>
    <button class="btn btn-primary">Click me!</button>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript">
// define a module named exampleApp
var app = angular.module("exampleApp", [])
    // define a controller named defaultCtrl
app.controller(‘topCtrl‘, function ($scope) {
    $scope.buttonEnabled = true;
    $scope.clickCounter = 0;
    $scope.handleClick = function () {
        $scope.clickCounter ++;
    }
    // 在NG中通过checkbox来控制JQ UI中的button
    // $watch(express, handle)方法注册一个事件处理函数，当express的值发生变化时，handle就会被触发
    // 当buttonEnabled的值发生变化时，匿名函数会触发
    $scope.$watch(‘buttonEnabled‘, function (newValue) {
        $("#jqui button").button({
            disabled : !newValue
        })
    })
    // PS: 类似的$watchCollection(object, handle)方法注册一个事件处理函数，当object对象中的任意属性值发生变化，handle就会被触发
});
$(function () {
    $("#jqui button").click(function () {
        alert("JQuery UI was clicked");
        // 同样JQ也可以控制NG中的组件
        // 点击JQ中的button按钮，使得ng的$scope.clickCounter递增
        // angular.element(ngRegion).scope()获取名为ngRegion的ng的作用域
        angular.element(ngRegion).scope().$apply(‘clickCounter = clickCounter + 1‘);

    });})
</script>
</body>
</html>

单击NG中的复选框控制JQ中button是否禁用，单击JQ中的button使得NG中的click count递增

时间： 2024-08-25 23:23:51

AngularJS 精妙绝伦的控制器的相关文章

AngularJS入门基础——控制器

AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,以及除存储数据模型之外的状态维护操作.它只是视图和$scope之间的桥梁. AngularJS应用的任何的一个部分,无论它渲染在哪个上下文,都有父级作用域存在.对ng-app所处的层级来讲,它的父级作用域就是$rootScope. 有一个例外,在指

AngularJS中的控制器和作用域

欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播   关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算.比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算. <input

AngularJS之使用控制器封装业务逻辑

控制器的作用 我们知道,在AngularJS中,实现数据绑定的核心是scope对象.那么控制器又有什么用呢? 简单地说,没有控制器/controller,我们没有地方定义业务模型. 回忆下ng-init指令.我们可以使用ng-init指令在scope对象上定义数据,比如: <div ng-init="sb={name:'somebody',gender:'male',age:28}"> </div> 但是,ng-init的值是一个AngularJS表达式,没有办

angularjs 模块与控制器 （多个模块module?? 多个控制器controller??）

angularjs 中只能有一个模块module(ng-app=""),一个模块可以有多个控制器(ng-controller="") 自己试验的时候,js跟页面可以写在一块,但是大型项目开发中,最好做到html与js分离,便于以后维护. 下图所示:ng-app只能有一个,一个ng-app 中可以有多个controller ;定义多个ng-app时无意义. 运行效果图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

AngularJS中的控制器示例_2

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp'

AngularJS中的控制器示例_3

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> var myModule = angular

AngularJS中的控制器示例

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp'

AngularJs入门篇-控制器的加深理解基础篇

下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间   下面的这个例子中,SceondController函数将接受两个参数,既该DOM元素的$scope和$timeout. 可以将视图中clock变量用{{}}包起来,以显示$scope中的clock的值. ///////////////  THML <div ng-controller="SceondController"> <h5>{{ clock }}</h5> &l

[angularjs] angularjs系列笔记（四）控制器

Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法 根作用域 所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有的html元素中 $rootScope是各个controller中scope的桥梁,用rootscope定义的值可以在各个控制器中使用 AngularJs控制器 AngularJs控制器控制AngularJs的数据 控制器的方法 AngularJs控制器通过$scope来分配变量,也可以使用