创建自定义的指令

除了 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. python之gui-tkinter可视化编辑界面 自动生成代码

    首先提供资源链接 http://pan.baidu.com/s/1kVLOrIn#list/path=%2F

  2. Storm同步调用之DRPC模型探讨

    摘要:Storm的编程模型是一个有向无环图,决定了storm的spout接收到外部系统的请求后,spout并不能得到bolt的处理结果并将结果返回给外部请求.所以也就决定了storm无法提供对外部系统 ...

  3. vector 利用swap 函数进行内存的释放 vector<int>().swap

    首先,vector与deque不同,其内存占用空间只会增长,不会减小.比如你首先分配了10,000个字节,然后erase掉后面9,999个,则虽然有效元素只有一个,但是内存占用仍为10,000个.所有 ...

  4. bzoj3156 防御准备 - 斜率优化

    Input 第一行为一个整数N表示战线的总长度. 第二行N个整数,第i个整数表示在位置i放置守卫塔的花费Ai. Output 共一个整数,表示最小的战线花费值. Sample Input 102 3 ...

  5. S2_SQL_第三章

    3.1:修改表 3.1.1:修改表 语法: Alter table <旧表名> rename [ TO] <新表名>; 例子:Alter table `demo01` rena ...

  6. 关于如何绑定Jquery 的scroll事件（兼容浏览器 Wookmark瀑布流插件）

    做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...

  7. TreeViewItem实现整行选中 (两种用法)

    用法一 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quo ...

  8. WPF使用资源字典组织资源

    转载:http://blog.163.com/wangzhenguo2005@126/blog/static/371405262010111413321728/     首先在解决方案资源管理器中添加 ...

  9. 从字符串获得MAC地址的方法

    今日有感于编程水平下降,特意练习一下,根据MAC地址字符串,获取MAC地址的2种方法. #include <stdio.h> void func1(char *str){ unsigned ...

  10. Java爬虫

    作为一位Java爬虫的初学者,分享一下自己的心得.所用到的jar包 org.codehaus.jettison.jar jsoup-1.7.3.jar个人认为爬虫的实现机制:获取Docume对象-&g ...