为什么使用控制器?
控制器就像领域模型和视图的纽带,它从模型中暴露数据给视图,它给视图提供数据与服务,并且定义了所需的业务逻辑,从而将用户行为转换为模型上的变化。
一.理解基本原理
控制器是通过NG的Module.controller来创建的,它接受一个控制器名称和一个工厂函数,这个工厂函数内部有一个$scope服务,用于向视图提供作用域,我们也正是通过修改$scope来修改控制器的作用的。
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <!-- 引入 Bootstrap --> <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> </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"/> <!-- 引入 Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <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", []) // 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>
控制器在视图中使用的两次,相应的他们虽然数据模型相同但是作用域不同,展示不可用进行通讯。
接下来,我们要跨作用域实现通信。
2.复用控制器
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <!-- 引入 Bootstrap --> <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", []) // 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"/> <!-- 引入 Bootstrap --> <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> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <!-- 引入 Bootstrap --> <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()
第二步:目前三个控制器还是互相独立的,我们需要使用控制器继承,只需要在父类视图中,添加子类控制器即可
注意:
NG对作用域上的数据值的继承处理方式,以及如何受ng-model影响的
读取属性值:当前作用域->父级作用域…->顶级作用域
ng-model指令修改属性值:当前作用域,如果没有,隐藏该属性
案例中,我们使用对象中添加属性,利用原型实现了共享
接下来,我们看看效果图。
4.使用多个控制器
很简单,前面我们已经使用过了!
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <!-- 引入 Bootstrap --> <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> </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"/> <!-- 引入 Bootstrap --> <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> </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"/> <!-- 引入 Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.ui.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div id="ngRegion" class="well" ng-controller="topCtrl"> <h4>AngularJS</h4> <div class="checkbox"> <label> <input type="checkbox" ng-model="buttonEnabled"> Enable Button </label> </div> <div> <label> <button class="btn btn-primary" type="button" ng-click="handleClick()">Click me!</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"> // 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").attr("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递增,当然,单击NG中的click count也递增。
附:
AngularJS知识库:http://lib.csdn.net/base/23
AngularJS地址:https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js,其它版本或模块修改URL即可获得。
文章来源:http://blog.csdn.net/super_yang_android/article/details/51627272
相关推荐
《精妙绝伦的jQuery 源代码》一书,无疑是深入理解jQuery核心机制的宝贵资源。这本书通过详细的代码示例,帮助读者剖析jQuery库的内部运作,从而提升JavaScript编程能力。在这里,我们将探讨jQuery的核心概念、设计...
在这个精妙绝伦的ui设计主题中,我们将深入探讨UI设计的重要原则、设计流程、工具使用以及如何创造出令人愉悦且高效的用户体验。 一、UI设计基础概念 UI设计主要关注的是应用程序或网站的视觉呈现和交互方式,其...
ppt图文并茂的介绍了制作ppt的色调以及排版技巧
【制作精妙绝伦的七种武器PPT学习教案】是一个关于如何创建高效且具有吸引力的PPT的教程。这个教程引用了古龙小说《七种武器》的概念,将其转化为制作PPT的七大核心要素,分别是目标、逻辑、风格、布局、颜色、过程...
该资源是学习jQuery的好书,内容完整,扫描清晰,带目录。
精妙绝伦的建模、光影, 还有光线追踪 和超高画质。 作者寄语: 植物大战僵尸这款游戏在我的童年里留下了不可磨灭的印记, 它陪伴着我从小到大为我带来了许多的欢乐, 谨此植物大战僵尸3D版献给所有热爱植物大战...
3. 苹果Ⅰ电脑的设计:苹果Ⅰ电脑是第一台只有一个主板的个人电脑,沃兹尼艾克设计的软盘驱动器精妙绝伦,只有同类产品的四分之一大小。 4. 苹果Ⅱ电脑的设计:苹果Ⅱ电脑定义了个人电脑的标准:显示器,键盘,驱动...
Python和Pyglet写成的开源类Minecraft游戏 Minecraft是一个沙盒建造游戏,中文非官方译名为“我的世界”或...玩家在游戏中的形象可以在单人或多人模式中通过摧毁或创造方块以创造精妙绝伦的建筑物,创造物和艺术 品。
近段时间以来,通过接触有关海量数据处理和搜索引擎的诸多技术,常常见识到不少精妙绝伦的架构图。除了每每感叹于每幅图表面上的绘制的精细之外,更为架构图背后所隐藏的设计思想所叹服。个人这两天一直在搜集各大型...
你可以通过很多方法达到这个目的,比如丰富详实的内容,光彩夺目的模板,精妙绝伦的动画,当然还有演讲者的演说水平和与观众互动等等。以上的几点中,你能够做到2-3点的话,你的PPT就可以称得上是优秀的。但值得注意...
1. 黑白名单:这项设施允许贵公司精准控制,只有预先指定的IP能够登录ERP系统 2. 区域限制:通过我们的技术,可以设定一个数字领域的边界,如同将ERP系统限制在一座无形的城池——上海。 3. 时间限定:时间,那流转...
首先,成语的学习部分,提到了一系列与李白诗歌艺术成就相关的成语,如“精妙绝伦”表示精细美妙,无与伦比;“炉火纯青”比喻学问、技艺达到很高的境地;“活灵活现”形容神情逼真,如同亲眼所见;“栩栩如生”形容...
Linux内核的设计精妙绝伦,从进程与线程的管理到内存的精细控制,再到高效的调度策略,无一不体现了其作为现代操作系统核心的强大功能和灵活性。通过深入了解这些设计原理,我们不仅能更好地利用Linux系统,还能深刻...
4. 计划生育政策的风险:计划生育政策有效地控制了人口增长,但同时也带来了独生子女家庭面临的风险。一旦独生子女遭遇意外,整个家庭将面临巨大打击。这强调了风险管理的重要性,家庭和政策制定者都需要考虑多元化...
外观,精妙绝伦 简约而不简单,每一处细节均精心打磨,每一处体验都深入人心,每一步操作皆无比轻松。 惬意,发自内心 如春风,如夏雨,如秋叶,如冬雪。心旷神怡,妙不可言。这种感觉,绝无仅有。 效果,...
3、外观,精妙绝伦 简约而不简单,经典白和暗夜黑两种经典UI主题恰到好处。 4、惬意,发自内心 如春风,如夏雨,如秋叶,如冬雪。心旷神怡,妙不可言。这种感觉,绝无仅有。 5、效果,立竿见影 一分钟,桌面回归整洁...