AngularJS--directive

最新推荐文章于 2024-07-12 21:49:18 发布

坐在路边数星星

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量313

点赞数

文章标签： angularjs html html5

1.angularJS中directive命名

在使用directive时，第一个参数既是在html文档中使用的标签名。但是有个问题需要注意，在js文件中使用驼峰命名时，在html文件中需要使用'-'进行分隔，如下所示：

JS文件，在module中定义directive为myDirective：

angular.module('app',[])
    .directive('myDirective', function() {
        console.log('hello');
        return {
            restrict: 'E',
            template: '<a href="http://www.baidu.com">Click me to go to Baidu</a>',
            replace:true
        };
    });

HTML文件，使用标签应为my-directive

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/angular.min.js"></script>
    <script src="chapter8_1.js"></script>
</head>
<body>
    <my-directive></my-directive>
</body>
</html>

如果在HTML中同样使用驼峰形式，则会产生未知标签的错误。

2.Directive的格式

下面都是用来声明前面创建指令的合法格式：

<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->

为了让AngularJS能够调用我们的指令，需要修改指令定义中的restrict设置。这个设置告诉AngularJS在编译HTML时用哪种声明格式来匹配指令定义。我们可以指定一个或多个格式。例如，之前创建的指令中可以指定以元素（E）、属性（A）、类（C）或注释（M）的格式来调用指令：

angular.module('app',[])
    .directive('myDirective', function() {
        console.log('hello');
        return {
            restrict: 'EAC',
            template: '<a href="http://www.baidu.com">Click me to go to Baidu</a>',
            replace:true
        };
    });

无论有多少种方式可以声明指令，我们坚持使用属性方式，因为它有比较好的跨浏览器兼容性：<div my-directive></div>

遵循这个约定的同时，也要注意每个浏览器的内置样式，以便决定指令模板在HTML中是嵌套在声明元素内，还是替换声明元素。

坐在路边数星星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS--directive

在使用directive时，第一个参数既是在html文档中使用的标签名。但是有个问题需要注意，在js文件中使用驼峰命名时，在html文件中需要使用'-'进行分隔，如下所示：JS文件，在module中定义directive为myDirective：angular.module('app',[]) .directive('myDirective', function() {
复制链接

扫一扫