transclude、priority、terminal属性

transclude

  • transclude:指令元素中的原来的子节点移动到一个新模版内部

  • 当为true时，指令会删掉原来的内容，使你的模版可以用ng-transclude指令进行重新插入

priority && terminal

  • priority:设置指令在模版中的执⾏行顺序，顺序是相对于元素上其他执⾏行而言，默认为0，从大到小的顺序依次执行

  • 设置优先级的情况比较少，象ng-repeat,在遍历元素的过程中，需要angular先拷贝生成的模版元素，在应用其他指令，所以ng-repeat默认的priority是1000

  • terminal 是否以当前指令的权重为结束界限。如果这值设置为 true ，则节点中权重小于当前指令的其它指令不会被执行。相同权重的会执行。

例子：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        <custom-tags>原始数据</custom-tags>

        <div custom-tags2 custom-tags3>

        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>
`

app/index.js

var myApp = angular.module('myApp', [])

    .directive('customTags', function () {
        return {
            restrict: 'ECAM',
            template:'<div>新数据 <span ng-transclude></span></div>',
            replace: true,
            transclude:true
        }
    })

    .directive('customTags2', function () {
        return {
            restrict: 'ECAM',
            template:'<div>2</div>',
            replace: true,
            priority:-1
        }
    })

    .directive('customTags3', function () {
        return {
            restrict: 'ECAM',
            template:'<div>3</div>',
            replace: true,
            priority: 0,
            // 小于0的directive 都不会执行
            terminal:true
        }
    })

    .controller('firstController', ['$scope', function ($scope) {
        $scope.name = '张三';
    }])
`
PrevioustemplateUrl属性Nextcompile && link属性

Last updated

Was this helpful?