AngularJs(十)--自定义指令(四)自定义指令间的互相交互

tongwandouQX

于 2018-03-27 17:02:09 发布

阅读量493

点赞数

分类专栏： angularjs 文章标签： transclude require ng-transclude 自定义指令

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

版权

angularjs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本节将介绍自定义指令中更高级的配置项。

transclude配置项

如果在操作自定义指令时，存在嵌套结构或者嵌套的自定义指令，会出现一些意想不到的问题。

transclude配置项，字面意思就是嵌入，默认为false；
将transclude设为true时，需要与ng-transclude配合使用

实现指令嵌套指令：

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script src="js/jquery.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            var m1= angular.module("myApp",[]);
            m1.directive("hello",function(){
                return{
                    restrict:"E",
                    replace:true,
                    tensclude: true,
                    //当transclude为true时，在此指令的模板中必须要设置ng-transclude
                     //这样设置的意思是：将当前指令内嵌套的元素替换h1标签内的内容。
                    template : '<div>hello angular<h1 ng-transclude></h1></div>',
                };
            });
            m1.directive("hi",function(){
                return{
                    restrict:"E",
                    replace:true,
                    template : '<span>hi angular</span>',
                };
            });
            m1.controller('Aaa',['$scope',function($scope){

            }]);
        </script>
    </head>
    <body ng-controller="Aaa">
        <hello>
            <hi></hi>
        </hello>
    </body>
    </html>
</pre>

运行结果：
<img src="5.png" />
从图中可以看到，”hi”指令此时已经嵌套到”hello”指令中指定的位置上了。

require配置项

实现指令之间的数据交互:

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script src="js/jquery.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            var m1= angular.module("myApp",[]);
            m1.directive("hello",function(){
                return{
                    restrict:"E",
                    replace:true,

                    transclude: true,
                    //当transclude为true时，在此指令的模板中必须要设置ng-transclude
                    //这样设置的意思是：将当前指令内嵌套的元素替换h1标签内的内容。
                    template : '<div>hello angular<h1 ng-transclude></h1></div>',
                    controller: function ($scope) {
                        //把name绑定到$scope上，此时name的作用域只在"hello"指令内部，在别的指令内不能使用
                        /*$scope.name = "nice";*/
                        //把name绑定到$scope上，此时name可以被允许在别的指令内使用
                        this.name = "nice";


                    }
                };
            });
            m1.directive("hi",function(){
                return{
                    restrict:"E",
                    replace:true,
                    //require的值为需要引入的指令名字
                    require: "hello",
                    template : '<span>hi angular</span>',
                    //reController就是所引入或者所依赖的指令的controller
                    link: function(scope,element,attr,reController){
                        console.log( reController );//相当于"hello"指令中的this
                    }
                };
            });
            m1.controller('Aaa',['$scope',function($scope){

            }]);
        </script>
    </head>
    <body ng-controller="Aaa">
        <hello>
            <hi></hi>
        </hello>
    </body>
    </html>
</pre>

运行结果如下：
<img src="6.png"/>

运行报错

出错原因：
require: "hello"默认是引入当前指令自身上的指令，但是要引入的指令”hello”与当前指令”hi”是父- 子关系，所以程序执行出错。

`^`: 向上查找

对上述代码改正：
在require的值前面加入”^”符号，即require: "^hello"：代表要在当前指令的父级去找”hello”指令。
改正后运行结果：
<img src="7.png"/>

`?`: 容错

如果在require的值前面加入的是”?”符号，即require: "?hello"：意思是在寻找需要引入的”hello”指令的过程中，如果没有找到，也不会报错。
运行结果：
<img src="8.png"/>
从图中可看出：打印出的’reController’的值为null而没有报错。

综上可知，require的值写成这样：require: "?^hello"，会比较好。

总结：
很容易把自定义指令中的controller与link弄混，所以再次做下区别：
- link:
把当前指令所对应的DOM操作都写在link中；link所做的都是当前指令所实现的内部功能，是对内的；
- controller:
一般是多次指令调用时的数据共享；在指令与指令之间交互时，可以提供公有的属性或方法；