AngularJS 精妙绝伦的控制器

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了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>@H_404_380@ </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",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>@H_404_380@ </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',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>@H_404_380@ </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',[]) .service("ZipCodes",function ($rootScope) { return { setZipCode : function (type,zip) { this[type] = type; $rootScope.$broadcast("zipCodeUpdated",zipCode : zip }) } } }) // define a controller named defaultCtrl .controller('defaultCtrl',$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",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>@H_404_380@ </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(" "),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(" "),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",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相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作