您的位置：首页 > Web前端 > AngularJS

AngularJs 的指令

2014-02-20 13:33 295 查看

使用指令可以扩展HTML标签，实现一些特殊的功能。

创建指令的基本伪代码模板如下：

var myModule = angular.module(...);

myModule.directive('namespaceDirectiveName',function factory(injectables){
var directiveDefinitionObject = {
restrict:string,
priority:number,
template:string,
templateUrl:string,
replace:bool,
transclude:bool,
scope:bool or object,
controller:function controllerConstructor($scope,$element,$attrs,$transclude),
require:string,
link:function postLink(scope,iElement,iAttrs){...},
compile:function compile(tElement,tAttrs,transclude){
return:{
pre:function preLink(scope,iElement,iAttrs,controller){...},
post:function postLink(scope,iElement,iAttrs,controller){...}
}
}
};
return directiveDefinitionObject;
});

其中有一些选项是互斥的，大部分选项是可选的。

部分指令解释如下：

replace: 如果此配置项为true，则替换指令所在的元素。如果为false或则不定，则把当前指令追加到所在的元素内部。

controller: 创建一个控制器，它会暴露一个API，利用这个API 可以在多个指令间进行通信。

require: 要求必须存在另一个指令，当前指令才能正确运行。

link: 使用编程的方式修改最终生成的DOM 元素实例，添加事件监听器，并设置数据绑定。

compile: 在使用 ng-repeat 时，用编程的方式修改DOM 模板，从而实现同一个指令的跨越多个实例的特性。compile 函数也可以返回一个link 函数，可以用它来修改产生的元素实例。

——————————————————————————————————

命名：

不使用ng-这个前缀为指令命名，因为这可能会和Angular 内置的指令产生冲突。

命名举例：如果你选择super- 作为前缀，然后编写了 date-picker 控件，把它命名为superDatePicker，那么在模板中，你就可以把它写成super-date-picker、super:date-picker，data-super-date-picker，或者其它变体。

restrict

restrict 属性用来描述指令的声明的风格，即它是否可以被用作元素名称，元素属性，样式类或者注释。

字母声明风格
示例

E 元素<my-menu title=Products></my-menu>

A 属性<div my-menu=Products></div>

C 样式类<div class=my-menu:Products></div>

M 注释

如果忽略了restrict 属性，那么它的默认值为A，则你的指令就只能作为属性来使用。

一个示例：

<!doctype html>
<html lang='en' ng-app='app'>
<head>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body>
<hello></hello>
<script>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
templateUrl: 'helloTemplate.html',
replace: true
};
});
</script>
</body>
</html>helloTemplate.html 的内容是：<div>Hi there</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航