AngularJS（1）——AngularJS指令机制

最新推荐文章于 2020-02-02 15:54:41 发布

我是周洲

最新推荐文章于 2020-02-02 15:54:41 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： 4.Hybird_APP AngularJS 文章标签： angular angularjs javascript

本文链接：https://blog.youkuaiyun.com/zhou2s_101216/article/details/51260098

4.Hybird_APP 同时被 2 个专栏收录

5 篇文章

订阅专栏

AngularJS

5 篇文章

订阅专栏

本文深入讲解AngularJS指令的使用方法及自定义指令的创建过程，包括数据双向绑定、输入验证等核心功能。

About

关于angularjs的指令学习，小编看了imooc的视频然后翻墙到外面看文章（边看边Google翻译，好好学英语吧骚年们），然后回来写一个总结，写我看到的，写我听到的。

刚刚开始接触angular的时候，只觉得几句话就可以搞定一件事情，代替了之前一堆的AJAX的异步加载。AngularJS is perfect for Single Page Applications (SPAs).这个单页应用程序是什么，通常的说法是它通过避免页面刷新大大提高了网站的响应性，就像桌面应用，如果单页程序放到移动端就像是原生app一样的用户体验。

最开始第一代web是干啥都要去找服务器调资源，从服务器拼接好html通过response来返回静态页面。现在看来，都讲究把经常加载的数据置前，在效率和空间总要选一样的。后来呢，AJAX来了，大家都学会了异步加载，还记得是个XMLHttpRequest 对象，就可以取部分数据异步更新。之后，AngularJS仅需HTML，CSS和JavaScript就可在客户端创建单页面应用。它的目标是是开发和测试更容易，增强MVC Web应用的性能。前端的料真的原来越来越腻害了呢。

AngularJS Directives

那么指令是什么东东呢，简单说，就是扩展html的一个新的属性。我们可以用定义好的指令完成我们的业务，也可以自定义的封装指令。指令就是一个简单的替换标签的过程，变换成html看得懂的内容。指令都带有一个ng-的前缀。先来个例子给你一个体会。

ng-app：标志着angularjs初始化

ng-init：应用程序数据初始化

ng-model：用来执行数据绑定到元素上面

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-init="learn='Angular'">

<p>Input something you want to learn:<input type="text" ng-model="learn"></p>
<p>You wrote: {{ learn}}</p>

</div>

</body>
   <script src="js/angular-1.3.0.js"></script>
</html>

下面已ng-model为例让大家了解一下指令可以做什么。

Two-Way Binding

在上面的例子中我用到了ng-app，ng-init，ng-model 这样实现了一个简单的angular小呆萌。其中有一个强大的取值表达式：{{}}，通过ng-model="learn" 实现了数据的双向绑定。在修改input的值的同时， AngularJS 属性的值（learn）也将修改。

Validate User Input

还是这个ng-model指令，它可以对angular程序进行数据验证（number,e-mail,required）

<!DOCTYPE html>
<html>

<body>

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email" >Not a valid e-mail address</span>
</form>

</body>
  <script src="js/angular-1.3.0.js"></script>
</html>

Application Status

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)

<!DOCTYPE html>
<html>
 
<body>
 
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
 
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>
 
</form>
 
</body>
  <script src="js/angular-1.3.0.js"></script>
</html>

vaild：验证值是否满足标准

dirty：验证值是否发生变化

touched：验证是否获取焦点

CSS Classes

这个就很好理解了，可以根据上面的状态来设置css样式，标识着发生变化。

<!DOCTYPE html>
<html>

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    Enter your name:
    <input name="myName" ng-model="myText" required>
</form>

<p>Edit the text field and it will get/lose classes according to the status.</p>
<p><b>Note:</b> A text field with the "required" attribute is not valid when it is empty.</p>

</body>
  <script src="js/angular-1.3.0.js"></script>
</html>

Create New Directives

看了这么多的小例子，自己写一个怎么样。写之前，你要知道指令声明的几种方式：

restrict	意义
E	Element name
A	Attribute
C	Class
M	Comment

想着我说过的，替换，这样实现一个简单的html的嵌套，相当于在主视图声明一个变量，在js文件里面替换掉主视图的声明。

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
</head>
<body>
    <hello></hello>
    <div hello></div>
    <div class="hello"></div>
</body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

JS文件：
var MyModule=angular.module("MyModule",[]);
MyModule.directive("hello", function () {
	return {
		restrict: 'ACME',
		template: '<div>Hi everyone!</div>',
		replace: true
	}
});

Expand

给大家看一个综合的例子，里面用到了自定义指令，link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。还有ng-repeat来循环显示一个数组。

js文件：

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                   + '<div class="title" ng-click="toggle()">{{title}}</div>'
                   + '<div class="body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    },{
        title:'hello world',
        text:'this is create by me'
    }];
});

html文件：
<html ng-app="expanderModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="js/angular-1.3.0.js"></script>
        <link rel="stylesheet" type="text/css" href="Accordion.css"/>
    </head>
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>
    <script src="Accordion.js"></script>
</html>