Angular自定义指令（初级）

来源：互联网发布：淘宝品牌选择编辑：程序博客网时间：2024/05/17 07:10

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。Angular包含丰富的指令，同时也允许我们创建自定义的指令。创建指令需要用到directive()方法，语法如下所示：

angular.application('myApp', [])    .directive('myDirective', function() {// 返回指令定义对象        return {// 通过设置项来定义指令        };    });

比如现在我要创建一个类似于button的一个指令<my-button></my-button>，看看如何实现：

//default.jsvar myApp = angular.module('app', []);myApp.directive("myButton",function(){    return {//在这里配置指令         restrict:"E",        template:"<div><input type='button' value='button'></div>"    };});

directive方法接收两个参数，第一个是指令名称"myButton"，采用的是驼峰命名方法。然后我们使用时，必须用破折号链接，变成"my-button"，这点别忘记了。第二个参数是一个函数，我们可以把它看作指令的构造函数，在这里面对指令进行一系列配置。

restrict指定该指令的类型，有“ECMA”四种，分别代表Element(元素标签)，Class(类)，Comment（注释），Atrribute（属性）。我们这里指定的E，也就是这个指令是当作html标签来使用。

template是该指令的表现形式，也就是视图结构。这里我们直接使用了imput标签。

定义好了指令后，就可以直接在视图中使用了。

<!doctype html><html ng-app="app"><head>   <script src="js/angular.js"></script>   <script src="js/default.js"></script></head><body><my-button></my-button></body></html>

如果想将这个指令作为属性使用，则将restrict设置为A即可，如下所示：

var myApp = angular.module('app', []);myApp.directive("myButton",function(){    return {//在这里定义指令        restrict:"A",        template:"<div><input type='button' value='button' onclick='alert(\"button clicked!\")'></div>"    };});

然后就可以作为标签的属性使用了:

<div my-button></div>

有时候template的内容过多，我们希望将其单独作为一个html文件，然后通过一个属性引用即可。而templateUrl就可以做到，如下所示：

var myApp = angular.module('app', []);myApp.directive("myButton",function(){    return {//在这里定义指令        restrict:"EA",        templateUrl:"button.html"    };});

我们将模板的内容移入了一个叫button.html的文档，然后通过templateUrl进行引用。这样是不是清爽了许多。

有时候我们的指令中会包含内容，例如：

<my-label>GAMELoft9</my-label>

//default.jsvar myApp = angular.module('app', []);myApp.directive("myLabel",function(){    return {//在这里定义指令        restrict:"E",        template:"<div><em>hello,this is a directive!</em></div>"    };});

遗憾的是显示的时候，GAMELoft9消失了，并没有显示出来。

hello,this is a directive!

为了让自定义指令包裹的内容不被覆盖，我们必须显式的指定transclude属性，并用ng-transclude指令指出在模板的哪里保存这些内容。如下所示：

var myApp = angular.module('app', []);myApp.directive("myLabel",function(){    return {//在这里定义指令         restrict:"E",        transclude:true,        template:"<div><em>hello <span ng-transclude></span>,this is a directive!</em></div>"    };});

这样就OK了！

hello GAMELoft9,this is a directive!

此外还有replace属性，它指定是否用模板去替换我们的自定义指令，是否替换了可以通过按F12查看。

1 0