angular-创建自定义的指令

http://www.runoob.com/angularjs/angularjs-directives.html

[ ] 创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">
<!--调用自定义指令-->
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
//注意第一个参数采用驼峰命名，但是在9行调用时，却又变为小写<runoob-directive>
//app.directive();第一个参数：自定义指令名称；第二个参数，回调函数
app.directive("runoobDirective", function() {return {template : "<h1>自定义指令!</h1>"};
});
</script>
</body>

[x] 你可以通过以下方式来调用指令：
元素名
属性
类名
注释
[ ] 元素名

<runoob-directive></runoob-directive>

[ ] 属性

<div runoob-directive></div>

[ ] 类名

<div class="runoob-directive"></div><script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {return {restrict : "C",template : "<h1>自定义指令!</h1>"};
});
</script>
<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

[ ] 注释

<!-- 指令: runoob-directive -->

<body ng-app="myApp"><!-- directive: runoob-directive --><script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {return {restrict : "M",replace : true,template : "<h1>自定义指令!</h1>"};
});
</script><p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p><p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p></body>

restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令

转载于:https://www.cnblogs.com/sakura-sakura/p/6678866.html

angular-创建自定义的指令相关推荐

Angular如何自定义attribute指令
需求: 实现一个自定义的attribute directive,当施加到某个html element时,鼠标hover上去,会修改其背景颜色. Highlight me! 下面是具体做法. (1) 使 ...
angular创建自定义指令的四种方式
angular除了内置的部分指令,还可以通过.directive来自定义指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令:nsHeader,在调用时使用需要-来分 ...
37.创建自定义的指令的限制使用通过restrict 设置
转自:https://www.cnblogs.com/best/tag/Angular/ 1. 元素名 <runoob-directive></runoob-directive> ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令 ------------- ...
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
angular的自定义指令---详解
1.angualr指令在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
Angular 4.x 自定义验证指令
表单是几乎每个 Web 应用程序的一部分.虽然 Angular 为我们提供了几个内置 validators (验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定义验证功能.接下来 ...
angular.js自定义指令
angular.js最为强大的地方在于可以通过自定义指令来扩展html元素,这种思路与JSP的taglib类似,但在实现细节上更为自由,并且自定义指令也可以提供表单元素交互.数据绑定.事件处理功能. ...

angular-创建自定义的指令

angular-创建自定义的指令相关推荐

最新文章

热门文章