AngularJs(八)--指令（四）---自定义指令（一）

最新推荐文章于 2022-04-03 22:24:55 发布

tongwandouQX

最新推荐文章于 2022-04-03 22:24:55 发布

阅读量354

点赞数

分类专栏： angularjs 文章标签：自定义指令配置项 angularJs

本文链接：https://blog.csdn.net/qianxing111/article/details/78915101

版权

angularjs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、结构

angular.module
- controller / run
- filter / directive
自定义指令与自定义过滤器是非常类似的。

app.directive()：接收两个参数：
(1)自定义指令的名称;
(2)自定义指令的回调处理函数。与自定义filter类似。

二、配置选项

1. restrict：

指定当前指令的类型。有四种类型：

(1) ‘E’:标签

element的缩写，代表当前指令是标签指令

        <pre>
            <!DOCTYPE html>
            <html ng-app="app">
                <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script src="js/angular.min.js"></script>
                    <script>
                        var app=angular.module('app',[]);
                        app.directive('hello',function(){
                            return{
                                restrict:'E',
                                template:"<div>Hello,angular!</div>"
                            }
                        });

                        app.controller('Aaa',['$scope',function($scope){

                        }])

                    </script>
                </head>
                <body>
                    <hello></hello>

                    <div ng-controller="Aaa"></div>
                </body>
            </html>
        </pre>

运行结果如下图所示：

这里写图片描述

(2)’A’：attribute:属性

指定当前指令为属性指令

        <pre>
            <!DOCTYPE html>
            <html ng-app="app">
                <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script src="js/angular.min.js"></script>
                    <script>
                        var app=angular.module('app',[]);
                        app.directive('hello',function(){
                            return{
                                /*restrict:'E',*/
                                restrict:'A',
                                template:"<div>Hello,angular!</div>"
                            }
                        });

                        app.controller('Aaa',['$scope',function($scope){

                        }])

                    </script>
                </head>
                <body>
                <!--此时这个标签指令就不能被解析-->
                    <hello></hello>
                    <p hello></p>
                    <div ng-controller="Aaa"></div>
                </body>
            </html>
        </pre>

运行结果如下图所示：

这里写图片描述

注意：指令类型是可以组合使用的。若想实现上述代码中的指令标签和属性标签都能被解析，可以将restrict配置选项设置为：”restrict:’AE’”。
restrict的值必须是大写的，小写是不会起作用的。

(3)’C’：class指令

restrict:'E'，<p class="hello"></p>修改上述代码。运行结果如下图所示：

这里写图片描述

(4)’M’：注释

<pre>
    <!DOCTYPE html>
    <html ng-app="app">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="js/angular.min.js"></script>
            <script>
                var app=angular.module('app',[]);
                app.directive('hello',function(){
                    return{
                        restrict:'AEM',
//replace的值必须设置为true,否则注释写法无效                       replace:true,
                        template:"<div>Hello,angular!</div>"
                    }
                });

                app.controller('Aaa',['$scope',function($scope){

                }])

            </script>
        </head>
        <body>
            <!--最后一个字符必须要有一个空格，否则不起作用-->
            <!-- directive:hello -->
            <div ng-controller="Aaa"></div>
        </body>
    </html>
</pre>

指令的模版内容会代替注释内容,运行结果如下：
这里写图片描述

总结：
a.后两种指令类型用的比较少，class指令容易与标签的class属性混淆，注释指令也容易混淆；前两种用的比较多，标签指令和属性指令。
b.标签指令一般用来重写标签，用模版内容代替标签；属性标指令一般用来做成功能性的指令，类似ng-show
c.若指令名称是多个单词，语法规则是：
app.directive('myHello',function(){...}，此处是驼峰；html里写法是：<my-hello></my-hello>。注意：“ng-”开头的指令是angularJS内置的指令，我们自定义的指令命名应该尽可能避开。

2. template:模版

用于为自定义指令添加模版。

3. replace

因为默认会将模版内容解析到所在标签内部。如果将这个值设为true,就会用模版替换所在指令的所在标签。运行结果如下图所示：
这里写图片描述

4.templateUrl：模板路径

当模板的内容比较多的情况下，会有一个问题，就是写起很不方便，可以采用templateUrl的方式来解决，它可以指定外部模板的页面路径。

angular-directive.html:

<pre>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 div{
            width: 200px;
            height:200px;
            border: 1px solid red;
            display: none;
        }
        #div1 input.active{
            background-color: red;
        }
    </style>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        var m1= angular.module("myApp",[]);
        m1.directive("myTab",function(){
            return{
                restrict:"E",
                replace:true,
                //字符串不能直接断行，不过有很多方法可以解决。例如下面这种：使用“\”斜杠符号进行字符串累加
               /* template:'<div id="div1">\
                                <input type="button" value="1" class="active"/>\
                                <input type="button" value="2"/>\
                                <input type="button" value="3"/>\
                                <div style="display: block">11111</div>\
                                <div>22222</div>\
                                <div>33333</div>\
                            </div>'*/
                templateUrl:'temp1.html'
            };
        });
    </script>
</head>
<body>
    <my-tab></my-tab>
</body>
</html>
</pre>

temp1.html:

<pre>
<div id="div1">
    <input type="button" value="1" class="active"/>
    <input type="button" value="2"/>
    <input type="button" value="3"/>
    <div style="display: block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</pre>

结论：运行效果与将模板直接写在template选项中一样。

5.自定义指令的配置项部分未完待续。。

tongwandouQX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs(八)--指令（四）---自定义指令（一）

一、结构angular.module - controller / run - filter / directive 自定义指令与自定义过滤器是非常类似的。app.directive()：接收两个参数： (1)自定义指令的名称; (2)自定义指令的回调处理函数。与自定义filter类似。二、配置选项1. restrict：指定当前指令的类型。有四种...
复制链接

扫一扫