angularJS 自定义指令 属性：transclude、priority、terminal

自定义指令的属性 transclude：为true时，允许把html中新定义的指令中原来的dom运用到该指令的template中。

属性priority，设置该指令的优先级，优先级大的先执行，默认指令的优先级是0（但ng-repeat指令的优先级默认是1000）。 属性terminal:为true时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。

示例：

html:

<div ng-app="myApp">

    <div ng-controller="firstController">

        <h3>custom-tags 指令：</h3>
        <div custom-tags>原始数据</div>

        <h3>一个div上同时使用 custom-tags2 指令 和 custom-tags3 指令：</h3>
        <div custom-tags2 custom-tags3></div>

    </div>

</div>

angular.module('myApp',[])
    //定义第一个指令：customTags
    .directive('customTags',function(){
        return {
            restrict:'ECAM',template:'<div>Hello <span ng-transclude></span> world!</div>',//<span ng-transclude></span> 原来的dom
            transclude:true,//为true时，允许把节点内原来的dom放入template中
            replace:true     //为true时，设置的template或templateUrl都必须仅由一个最外层标签包裹
        }
    })
    //定义第二个指令：customTags2
    .directive('customTags2',template:'<div>222</div>',replace:true,priority:-1  //指示指令的优先级，优先级大的先执行，默认指令们的优先级都是0，但ng-repeat指令的优先级是1000
        }
    })
    //定义第三个指令：customTags3
    .directive('customTags3',template:'<div>333</div>',priority:0,terminal:true  //为true时，指示优先级小于本指令的优先级的directive都不再执行
        }
    })
    .controller('firstController',['$scope',function($scope){
    }]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!