创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， myAngular, 但在使用它时需要以 - 分割, my-angular:

你可以通过以下方式来调用指令：

  • 元素名
  • 属性
  • 类名
  • 注释

元素名

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

<div ng-app="myDirective">

    <my-angular></my-angular>

</div>

<script>

    var app=angular.module("myDirective",[]);

    app.directive("myAngular", function() {//注意名称myAngular---<my-angular>

        return {

            template : "<p>自定义指令!</p>"

        };

    });

</script>

</body>

</html>

属性：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<div runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

</body>

</html>

类名：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<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>

</body>

</html>

注释：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<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>

</html>

限制使用

你可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

AngularJS学习篇（三）的更多相关文章

  1. angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  2. angularJS学习（三）——搭建学习环境

    1.安装Node.js 和Testacular 1.1. 安装Node.js及配置部分,在另一篇博文:node.js的安装里面讲到了,地址是:http://www.cnblogs.com/tianxu ...

  3. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  4. AngularJS学习篇（一）

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  5. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  6. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  7. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  8. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  9. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

随机推荐

  1. ios小型服务器环境配置

    之前买的一台二手iphone4退役了,上闲鱼上一看,就值200,而且耳机声音也有点轻,估计买不了什么钱 于是网上看看能不能有什么废物利用的法子,看到说做行车记录仪的,有说做git服务器的,感觉挺有兴趣 ...

  2. java从命令行接收多个数字，求和程序分析

    问题:编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 1.设计思想 (1)声明两个变量接收输入的字符串 (2)将字符串转换成int类型 (3)输出求和 2.程序流程图 3.源程序代码 i ...

  3. POJ-1273-Drainage Ditches（网络流之最大流）

    Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover patch. This ...

  4. Windows下 如何添加开机启动项

    Windows XP,Windows 7: 开始 ----> 所有程序 ----> 启动, 右键打开"启动"这个文件夹, 把想开机自动启动的软件快捷方式拖进去即可. ( ...

  5. hdu3974 找上属的模拟

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  6. javascript中DOM集锦（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Web的架构与html5基础知识

    图1:完整的Web应用构架 图2:html5的基本结构 head 可添加在头部标签元素有→→title meta style link base script noscript meta 几个重要属性 ...

  8. VB.net shell、IO.File.Open、Process.Start、Shellexecute API 运用经验总结

    打开文件还有很多方法,但我了解到运用较多的是上面几种- -,为了防止以后忘记,先把了解到的写下来. 1.Shell 这个看了很多网页,最靠谱的运用方法: Shell("cmd.exe /c ...

  9. RTKLIB编译及RTCM数据读取样例

    1.RTKLIB简介 RTKLIB是全球导航卫星系统GNSS(global navigation satellite system)的标准&精密定位开源程序包,RTKLIB由日本东京海洋大学( ...

  10. jquery定时刷新数据

    $(function () { setInterval("startRequest()", 3000); }); function startRequest() { $(" ...