Angular JS(二) 指令部分

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量72 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yishichangan925/p/7763988.html
版权

还是打算分开来写，因为这部分正好打算写一下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操作，封装为属性指令
如果是视图组件，封装为元素指令

 

转载于:https://www.cnblogs.com/yishichangan925/p/7763988.html

weixin_30950887
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular的自定义指令以及实例
08-31
在第二个示例中，我们看到一个更复杂的自定义指令`myTab`： ```javascript m1.directive('myTab', function() { return { restrict: 'ECMA', replace: true, scope: { myId: '@', myName: '=', myFn: '&' }...
Angular17之Angular自定义指令详解
11-27
本文将深入探讨Angular 17中的自定义指令，包括其基本概念、分类、常用常量以及如何创建和使用自定义属性指令。 1. HTML基础 HTML（超文本标记语言）是网页的基础，它由一系列标签组成，每个标签对应一个DOM对象，...
ng-show和ng-if的区别和使用场景
weixin_30381317的博客
10-11 774
一、ng-show（ng-hide）和ng-if都是控制标签的显示和隐藏，为什么angularjs会定义两个指令来供我们使用呢，不多多说肯定有各自的使用场景，接下来我们看哈实际原理： ng-show实质性就是控制标签的显示和隐藏，内部是display: none； ng-if则是移除标签和插入标签：； 二、实际比较 定义三个div <div ng-show="true">我...
Angular新手容易碰到的坑
SalmonellaVaccine的专栏
08-13 1602
http://www.ngnice.com/posts/2c8208220edb94 在Angular群里回答新手问题一段时间了，有一些Angular方面的坑留在这里备查，希望能对各位有所帮助。这个文章将来会随时更新，不会单独开新章，欢迎各位订阅。 Q1. 错在哪里？ 如果你这么写过，会发现这个位置啥也没有加载出来，那么，错在哪里呢？错在ng-include需要的是一个变量，
AngularJs:Directive指令用法
weixin_30765475的博客
10-09 881
AngularJs GitHub:https://github.com/angular/angular.js/ AngularJs下载地址：https://angularjs.org/ 摘要：Directive（指令）笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作...
AngularJS 学习笔记 02： 指令（directive）
凝弧
04-25 157
自定义指令 内置指令 ng-app（指定根元素） ng-controller（定义控制器） ng-include（引入页面文件） ng-cloak（闪烁修复） ng-repeat（遍历输出） ng-model / ng-init（定义 / 初始化变量） ng-if（元素是否存在） ng-bind（绑定元素内容） ng-class（绑定CSS类） ng-disabled（禁用） ng-swith...
Angular js 教程二
04-14
AngularJS，作为一款由Google...在本“Angular JS 教程二”中，我们将深入讲解这些概念，并通过实际示例来演示如何在项目中应用。学习AngularJS不仅能提升你的前端开发技能，也将使你能够构建高效、可维护的Web应用。
angular.js指令中的controller、compile与link函数的不同之处
11-30
某天一位前端大神问我：你知道angular指令中的controller,compile,link函数有什么不同？然后我就一脸懵逼了….于是决定深入的去探究下。 今天我们来一起了解一下它们有什么不同的地方: 先看一段示例代码 var ag =...
Angularjs之模块（angular.module('myApp', [])参数说明）
热门推荐
I_LV_XJ的博客
02-23 2万+
在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。 使用模块能给我们带来许多好处，比如： 保持全局命名空间的清洁；编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；易于在不同应用间复用代码；使应用能够以任意顺序加载代码的各个部分。 AngularJS允许我们使用angula
NGLView 安装与配置-交互式分子结构和轨迹查看
DrugAI
10-16 4829
NGLView NGLview 是Jupyter Notebook的小插件, 可用于交互地可视化分子结构, 可以查看分子动力学轨迹数据. 支持读取文件数据。 程序的源代码可以在网上Github里查看, 同时也可以在PyPI和bioconda内获取. NGLview在服务器端采用python, 而在客户端则采用JS来实现, 与Jupyter的整合则通过ipywidgets包实现. 客户端采用N...
解决ng-show闪现问题
weixin_34110749的博客
01-12 241
2019独角兽企业重金招聘Python工程师标准>>> ...
用angularjs遇到的坑们
weixin_30747253的博客
10-23 101
最近在用angularjs做一些东西，由于学艺不精，对angularjs了解不够，导致经常会不小心掉进一些自己挖的坑里(⊙_⊙)，在这里记下来，谨防又踩。 1、angularjs ng-show not working 在页面中用到了pagination 分页插件 <pagination total-items="bigTotalItems" page="bigCurrentPag...
【Angular】angular2+中没有*ngShow/ng-show，取而代之的是hidden
向着光芒的女孩
11-22 2877
场景 之前写过angularjs，就是1版本的angular，用过ng-show，然后我在angular2中也想通过css样式来隐藏元素，结果发现根据*ngIf的惯性写*ngShow时报错，也没有ng-show，要想实现这个功能则要通过hidden属性 关于hidden 使用hidden时的逻辑跟ng-show或者vue里的v-show相反即可，如下： <h3 [hidden]="!favoriteHero"> Your favorite hero is: {{favoriteHero}
Angular的一些坑
骆宏的专栏
05-24 1183
angular一些常见的坑
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 799
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1128
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 644
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
精通Angular(第二版)
1. **Angular基础知识**：介绍Angular的核心概念，如模块(Module)、组件(Component)、指令(Directive)和服务(Service)，以及它们在构建应用中的作用。 2. **模板语法**：详细讲解Angular模板中的数据绑定、属性绑定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值