码迷，mamicode.com
首页 > Web开发 > 详细

AngularJS 精妙绝伦的控制器

时间：2016-06-10 21:48:07      阅读：247      评论：0      收藏：0      [点我收藏+]

标签：

学习要点：

  • 为什么使用控制器
  • 基本原理
    • 创建使用控制器
    • 作用域
  • 组织控制器
    • 单块控制器
    • 复用控制器
    • 控制器继承
    • 多控制器
  • 无作用域控制器
  • 显示更新控制器–使用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递增
技术分享

AngularJS 精妙绝伦的控制器

标签：

原文地址：http://blog.csdn.net/super_yang_android/article/details/51627272
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！