创建一个模块
var app = angular.module('app', []);
创建一个简单指令标签
app.directive('alert', function(){
return {
template: '<div class="alert">' +
'<span class="alert-topic">' +
'something went wrong!' +
'</span>' +
'<span class="alert-description">' +
'You must inform the plate and the color of the car!' +
'</span>' +
'</div>'
};
});
使用templateUrl，创建指令标签
app.directive('alert', function(){
return {
templateUrl: 'template/alert.html'
};
});
template目录下alert.html代码如下：
<div class="alert"> <span class="alert-topic"> Something went wrong! </span> <span class="alert-description"> You must inform the plate and the color of the car! </span> </div>
replace属性，控制是否替换原来的标签元素: true/false
restrict属性，声明指令标签以何种方式出现在HTML标签中。
如下示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<alert></alert>
<script src="js/angular/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.directive('alert', function(){
return {
templateUrl: 'template/alert.html',
replace: true,
restrict: 'E'
};
});
</script>
</body>
</html>
可以同时使用‘AECM’中的多个或全部。
scope属性
前面将自定义指令标签的内容通过硬编码的形式直接写在模板里，这种方式有其局限性。
而通过scope属性，可以将指令标签显示的内容与模板分离，然后通过绑定的方式将其关联起来。如下：
（1）JS部分：
var app = angular.module('app', []);
app.directive('alert', function(){
return {
templateUrl: 'template/alert.html',
replace: true,
restrict: 'E',
scope: {
topic: '@topic',
description: '@description'
}
};
});
（2）alert.html模板部分
<div class="alert"> <span class="alert-topic"> <span ng-bind="topic"></span> </span> <span class="alert-description"> <span ng-bind="description"></span> </span> </div>
（3）在页面中使用该标签实例：
<alert topic="Action!" description="You must inform the plate and the color of the car!"></alert>
相关推荐
AngularJS 自定义指令 transclude：当元素标签需要嵌套时使用，与ng-transclude配合使用。默认值为false不能使用嵌套，true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例：...
AngularJS支持用户自定义标签属性，在不需要使用DOM节点操作的情况下，添加自定义的内容。 前面提到AngularJS的四大特性： 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容： 1 如何自定义...
本文实例讲述了AngularJS创建自定义指令的方法。分享给大家供大家参考，具体如下： 这是一篇译文，来自angular开发者说明的指令。主要面向已经熟悉angular开发基础的开发者。这篇文档解释了什么情况下需要创建自己的...
AngularJS的自定义指令，就是你自己的指令，加上编译器编译DOM时运行的原生核心函数。这可能很难理解。现在，假设我们想在应用中不同页面复用一些特定的代码，而又不复制代码。那么，我们就可以简单地把这段代码放到...
有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定，从而减少冗余代码，那么可以尝试一下的方式 例如：我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素 ...
主要介绍了详解AngularJS中自定义指令的使用,包括结合自定义HTML标签的使用,需要的朋友可以参考下
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 angularJS是google公司主推的js开发优秀框架… 页面展示： 在应用中进行加密是普遍存在的，个人建议在前端实现加密签名（前端加密是否必要...
比如标签的href属性可以来指定链接的...ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-app指令 ng-app 指令启动一个Angu
分别给大家介绍了AngularJS实现标签页的两种方式，一种是通过普通指令实现标签页，另外一种是通过自定义指令实现的标签页，有需要的朋友们可以来参考借鉴，下面来一起看看吧。
那么angular如何实现呢，我用的是自定义指令（directive）。 方法如下 1.下面是我html部分代码，detail-scroll是我自定义的标签 ............... <div ng-style=maskStyle detail-scroll style=transition: ...
AngularJS指令，该指令包装<audio>或<video >标记公开方法和属性来操纵播放器 github页面上的示例： : 弃用：开发停滞 该库的用户数量超出了我最初开发时的预期。 我对此感到非常高兴，但这意味着它...
版 次：1页 数：348字 数：448000印刷时间：...第8章 创建自定义指令 第9章 创建高级指令 第10章 创建为全球用户服务的AngularJS应用 第11章 开发健壮的AngularJS应用 第12章 打包和部署AngularJS Web应用 索引
类固醇上的Textareas-仅添加AngularJS指令 特征 单词突出显示（语法，关键字...），支持多组 自动完成 下拉建议（在输入@后提及用户，主题标签支持，关键字...） 所需的配置最少，但必要时可高度自定义 入门 通过或...
以下是AngularJS中最重要的核心功能如下所述： •数据绑定: 模型和视图组件之间的数据自动同步。 •适用范围: 这些对象参考模型...这些可以被用来创建作为新的，自定义部件的自定义HTML标签。AngularJS设有内置指令(如
第8章创建自定义指令213 81什么是AngularJS指令214 理解内置指令214 在HTML标签中使用指令215 82指令的编译生命周期215 83为指令编写单元测试217 84定义指令218 85使用指令修改按钮样式219 编写一个按钮指令...
将AngularJS 1.xx组件指令升级到Web组件（W3C）自定义元素！ 为什么要等待AngularJS 2.0开始为W3C Web组件规范编写Angular代码？ 仅需一个很小的2kb自定义元素polyfill和此提供程序，您就可以在AngularJS 1.xx应用...
Videogular 主要关注移动端设备和 HTML5 视频特定的功能：可绑定属性：Videogular 的指令是可绑定的 通过插件可扩展：根据 API 可以开发定制插件基于主题：可以自定义主题原生全屏支持： 支持 Chrome, Firefox, ...
#angular-gravatar 这是一个简单的 AngularJS 指令，它需要一个电子邮件地址（以及可选的一些其他参数... ＃＃用法使用自定义标签在您的 HTML 文件中使用带有以下代码的指令： < gravatar email =" your@email.com
斯堪尼亚角选择2 用于AngularJS指令Scania-angular-select2指令为您提供可自定义的选择框，并支持搜索，标记，ng-model，ng-repeat，本机HTML选择和选项标签，无限滚动以及许多其他常用选项。 请参阅select2 API文档...
AngularJS 完整指南YN ... 我们的讨论是： 初步的制作简单的应用程序MVC架构AngularJS 中的模块AngularJS 中的复杂模型在 AngularJS 中读取 JSON 数据过滤器数据绑定路由参数路由导航动画片标签验证表自定义指令。