Angular JS 指令部分

Posted 怀瑾握瑜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular JS 指令部分相关的知识，希望对你有一定的参考价值。

还是打算分开来写，因为这部分正好打算写一下Angular JS里面的常用指令，篇幅会比较多，就不放在一起了。

接上部分继续说一下Angular JS的骚操作23333

（四）常用指令

使用这些指令可以省去频繁的DOM操作

1.ng-bind

作用与{{}}类似，但是用ng-bind比{{}}更好，可以解决{{}}闪烁问题

 

<body ng-app="app" ng-controller="appCtrl">
<!-- 两者等价，只是在网络比较慢的时候上面会出现显示源码的情况 -->
<p>{{ val }}</p>
<p ng-bind="val">{{ val }}</p>
</body>

2.ng-cloak

 

作用：如果喜欢使用{{}}，又要解决闪烁问题，可以使用ng-cloak配合css实现

原理：Angular渲染视图时会自动去除元素身上的ng-cloak属性，好让元素显现出来

<style>
[ng-cloak] {
display: none;
}
</style>


<!-- 视图渲染前body为隐藏状态，body子元素中的使用{{}}变被一起隐藏掉 -->
<!-- 视图渲染时Angular会自动去除ng-cloak属性，元素变正常显示 -->


<body ng-cloak ng-app="app" ng-controller="appCtrl">


<p>{{ val }}</p>
<p ng-bind="val">{{ val }}</p>


</body>

 

3.ng-if

作用：控制元素的插入与移除

<body ng-app="app" ng-controller="appCtrl">


<!-- 这里的isLive是$scope中定义的属性 -->


<p ng-if="isLive1">{{ val }}</p>
<p ng-if="isLive2">{{ val }}</p>


</body>

 

4.ng-show

 

<body ng-app="app" ng-controller="appCtrl">


<!-- 这里的isShow是$scope中定义的属性 -->


<p ng-show="isShow1">{{ val }}</p>
<p ng-show="isShow2">{{ val }}</p>


</body>

 

 

5.ng-repeat

 

作用：遍历数组或对象，也可指定遍历次数
注意：如果遍历的值存在相等的情况会报错，需要添加track by指定唯一key
因为ng-repeat会生成很多元素，数据一改变，所有元素又得重新解析渲染一遍

<body ng-app="app" ng-controller="appCtrl">


<!-- 遍历数组 -->


<ul>

<!-- angular为了提高性能，会对数据进行比较，如果没有改变的元素不会重复编译生成 -->
<!-- 但是这个优化需要给每个元素指定一个唯一key，默认这个key就是遍历到的值，key是不能重复的，重复报错 -->


<li ng-repeat="val in list track by $index">{{ val }}</li>
<li ng-repeat="(i, val) in list track by i">{{ i }}:{{ val }}</li>
</ul>


<!-- 遍历对象 -->


<ul>
<li ng-repeat="val in obj">{{ val }}</li>
<li ng-repeat="(k, val) in obj">{{ k }}:{{ val }}</li>
</ul>


</body>

 

 

 

6.ng-class

作用：动态设置或控制类名

 

<body ng-app="app" ng-controller="appCtrl">


<!-- 一、字符串：通过$scope属性动态设置类名 -->

<div ng-class="classes"></div>


<!-- 二、数组：通过$scope属性精确设置类名 -->
<div ng-class="[ className1, className2 ]"></div>


<!-- 三、对象：通过$scope属性控制类名 -->
<div ng-class="{ ‘a‘: hasA: ‘b‘: hasB, ‘c‘: hasC }"></div>
<div ng-class="{ ‘a b c‘: hasClass }"></div>
<div ng-class="{ [classes]: hasClass }"></div>


</body>

 

 

7.ng-事件

作用：元素事件绑定

备注：如果回调需要事件对象，传入$event即可

<body ng-cloak ng-app="app" ng-controller="appCtrl">


<p>{{ number }}</p>
<button ng-click="add()">点击add</button>
<button ng-mousemove="add($event)">移动add</button>


</body>

 

8.ng-module

 

通常网站会有一些需要用户填写并提交数据的表单，这个指令处理表单就是神器

作用：表单与数据双向绑定，任意一方的值发生改变另一方跟着变

<body ng-app="app" ng-controller="appCtrl">


<input type="text" ng-model="val" />
<input type="text" ng-model="val" />
<h1>{{ val }}</h1>


</body>

 

 

9.ng-include

 

通过ajax的方式引入一段html作为子元素

注意：重复加载同一个模版只会请求一次，因为Angular会自动缓存

<body ng-app="app" ng-controller="appCtrl">


<header ng-include="tpl/header.tpl"></header>
<section ng-include="tpl/section.tpl"></section>
<section ng-include="tpl/section.tpl"></section>
<footer ng-include="tpl/footer.tpl"></footer>


</body>

 

 

 ?常见事件

 

  • ng-click：点击
  • ng-dblclick：双击
  • ng-mousedown：鼠标按下
  • ng-mouseup：鼠标放开
  • ng-mouseenter：鼠标进入
  • ng-mouseleave：鼠标离开
  • ng-mousemove：鼠标移动
  • ng-keydown：键盘按下
  • ng-keyup：键盘放开
  • ng-change：值发生改变
  • ng-paste：表单粘贴
  • ng-copy：表单复制
  • ng-cut：表单剪切
  • ng-submit：表单提交

 

 

（五）特殊指令

 

ng-src


作用：主要是为了解决原生属性在配合Angular使用时存在的bug
比如这样写<img src="{{ imgUrl }}" />
浏览器首先会发起一个‘{{ imgUrl }}‘请求
当DOM解析完毕后，Angular才会把imgUrl替换成正确的值
这时候浏览器才会发起正确请求展示img
不足之处：访问$scope的属性，必须使用{{ }}表达式，不能直接使用属性名


<body ng-app="app" ng-controller="appCtrl">
<!-- 一、如果不使用ng指令，那么浏览器会额外发起多余的{{ imgUrl }}请求 -->
<img ng-src="{{ imgUrl }}" />
</body>

 

ng-href


作用：主要是为了解决原生属性在配合Angular使用时存在的bug
不足之处：访问$scope的属性，必须使用{{ }}表达式，不能直接使用属性名


<body ng-app="app" ng-controller="appCtrl">
<!-- 预防a标签点击时造成的页面刷新 -->
<a ng-href=""></a>
<!-- 预防Angular解析未完成时，点击跳转到错误的url -->
<a ng-href="{{ skipUrl }}"></a>
</body>

 

 

（六）指令的种类

指令的定义：

 

  • HTML在构建应用时存在诸多不足
  • Angular通过扩展一系列的HTML属性或标签来增强HTML
  • Angular内置了很多指令，也允许我们自定义指令

指令分为属性指令，标签指令，类名指令，注释指令。

(1) 属性指令
最常见使用最频繁的指令
属性指令主要是为了封装重复的DOM操作
<p ng-show="true">显不显示呢</p>

eg

属性指令主要是为了操作DOM，一般不会替换元素的子节点
这里的例子会替换元素子节点是因为实现比较简单
目的是为了先让大家对不同类型的指令有个基本认识

<body ng-app="app">
<div ngl-tpl></div>
</body>


var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 配置指令类型：A:属性，E:标签，C:类名，M:注释
restrict: ‘A‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);

 

(2) 标签指令
使用频率第二的指令
标签指令主要是为了抽取页面中可复用的组件
<ng-view></ng-view>

eg

<body ng-app="app">
<ngl-tpl></ngl-tpl>
<ngl-tpl2></ngl-tpl2>
</body>


var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 指令类型A:属性，E:标签，C:类名，M:注释
restrict: ‘E‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);


var app = angular.module(‘app‘, []);
app.directive(‘nglTpl2‘, [function() {
return {
restrict: ‘E‘,
template: ‘<section><p>我是指令模版</p><p>我是指令模版</p><section/>‘,
// 如果想把原来的元素覆盖掉，可以配置为true，
// 设为true之后模版必须使用一个根元素包裹起来，
// 建议设为true，防止自定义标签出现在DOM中
replace: true
};
}]);

 

(3) 类名指令
操作拥有特定class的元素，不常用，属性指令可替代
<p class="指令名称">操作我</p>

eg

<body ng-app="app">
<div class="a ngl-tpl c"></div>
<div class="a nglTpl c"></div>
</body>


var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 配置指令类型：A:属性，E:标签，C:类名，M:注释
restrict: ‘C‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);

 

(4) 注释指令
通过特定格式的注释使用，不常用，标签指令可替代

注释指令必须配置replace为true.
<!-- directive:指令名称 -->

eg

<body ng-app="app">
<!-- directive:ngl-tpl -->
<!-- directive:nglTpl -->
</body>


var app = angular.module(‘app‘, []);
app.directive(‘nglTpl‘, [function() {
return {
// 配置指令类型：A:属性，E:标签，C:类名，M:注释
restrict: ‘M‘,
// 替换元素innerHTML
template: ‘<p>我是指令模版</p>‘
};
}]);

语法

 

和控制器的定义方式差不多，可以配置服务依赖与一个回调
语法：模块.directive(name, [ 服务依赖..., function() { return config } ])


命名规则
名字必须使用驼峰式命名
使用时需要通过-分隔单词，主要是标签名与属性名
注意：使用指令不一定需要控制器，除非要实现数据动态化

 

 

（七）小结

 

服务是为了封装可复用的业务逻辑
指令是为了封装可复用的dom操作或视图组件
如果是dom操作，封装为属性指令
如果是视图组件，封装为元素指令

 




























































































































































以上是关于Angular JS 指令部分的主要内容，如果未能解决你的问题，请参考以下文章

推荐 15 个 Angular.js 应用扩展指令

Angular 指令创建重复元素

Angular JS 和部分

Angular JS - 6 - Angular JS 常用指令

从 Angular js 升级到 Angular 8 的指令

Angular JS - 7 - Angular JS 常用指令2