AngularJs 的指令

最新推荐文章于 2024-05-13 14:54:25 发布

平江夜弹

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量522

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/u013544065/article/details/19549061

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用指令可以扩展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>