AngularJS精妙绝伦的控制器

r囧r小猫 2022-04-11 12:43 182阅读 0赞

**为什么使用控制器？ **

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

**一.理解基本原理**

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

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

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

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

![274fa959-79f9-3fa8-ae59-5148aafd73b6.png][]

**二.组织控制器 **

**1.单块控制器**

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

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

![01b3b5ba-5c7b-34b3-8ee3-5ea06f41312e.png][]  
        接下来，我们要跨作用域实现通信。

**2.复用控制器**

原理解析：

第一步：当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值

![e77f5ac4-d4b4-3eaf-a5b0-c1233407bf87.png][]  
        同时，我们还可以使用服务来调节作用域事件。

<!DOCTYPE>
    
    <html ng-app="exampleApp">
    <head>
        <title>Angular Directive</title>
        <meta charset="utf-8"/>
        
        <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <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>
    
    <html ng-app="exampleApp">
    <head>
        <title>Angular Directive</title>
        <meta charset="utf-8"/>
        
        <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <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()

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

![bf2456a8-465e-3a88-b296-9eb6afece0de.png][]  
注意：

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

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

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

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

接下来，我们看看效果图。

![9549a797-e25a-343c-a20b-9c6d73fad2fc.png][]

**4.使用多个控制器**

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

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

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

![72bd38f8-d524-358c-b4c2-1cfd1291f572.png][]

**6.显示更新作用域 **

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

![d24b174c-7741-325c-be63-816952e6b281.png][]  
        什么意思呢？我们将在案例中详解。

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

![f06e6793-ec43-370b-bd5a-b1069aa8befa.png][]

附：

AngularJS知识库：[http://lib.csdn.net/base/23][http_lib.csdn.net_base_23]

AngularJS地址：[https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js][https_ajax.googleapis.com_ajax_libs_angularjs_1.2.9_angular-route.js]，其它版本或模块修改URL即可获得。

文章来源：[http://blog.csdn.net/super\_yang\_android/article/details/51627272][http_blog.csdn.net_super_yang_android_article_details_51627272]

[274fa959-79f9-3fa8-ae59-5148aafd73b6.png]: /images/20220411/e4a0fb337c004242bc8e4d42e40a72f6.png
[01b3b5ba-5c7b-34b3-8ee3-5ea06f41312e.png]: /images/20220411/4a4cb393a493401b840ce0aace950e08.png
[e77f5ac4-d4b4-3eaf-a5b0-c1233407bf87.png]: /images/20220411/5952b991a58b4edfa4375457ced57238.png
[bf2456a8-465e-3a88-b296-9eb6afece0de.png]: /images/20220411/eb4ac740984f43b296dbe41d52410762.png
[9549a797-e25a-343c-a20b-9c6d73fad2fc.png]: /images/20220411/d0e794d417d342ccb094dd90f255e610.png
[72bd38f8-d524-358c-b4c2-1cfd1291f572.png]: /images/20220411/0cebed6178f1433d8d1927be0a45ca3f.png
[d24b174c-7741-325c-be63-816952e6b281.png]: /images/20220411/81058e41bc634699999addd3ddbedf81.png
[f06e6793-ec43-370b-bd5a-b1069aa8befa.png]: /images/20220411/6b666cc834e84b15aac607bb1be907b0.png
[http_lib.csdn.net_base_23]: http://lib.csdn.net/base/23
[https_ajax.googleapis.com_ajax_libs_angularjs_1.2.9_angular-route.js]: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js
[http_blog.csdn.net_super_yang_android_article_details_51627272]: http://blog.csdn.net/super_yang_android/article/details/51627272