首页 > Web开发 > 详细

Angularjs[27] - 自定义指令(3)(transclude, priority, terminal 属性)

时间:2017-02-02 21:55:05      阅读:371      评论:0      收藏:0      [点我收藏+]
  • transclude: 指令元素中原来的子节点移动到一个新模板内部,当为 true 时,指令会删掉原来的内容,使模板可以用 ng-transclude 指令进行重新插入。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">

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

    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
var myApp = angular.module(‘myApp‘,[])

.directive(‘customTags‘,function () {
    return{
        restrict: ‘ECAM‘,
        template: ‘<div>新数据 <span ng-transclude></span></div>‘,
        replace: true,
        transclude: true
    }
})
.controller(‘firstController‘,[‘$scope‘,function ($scope) {
    $scope.name = ‘Alrale‘;
}]);

技术分享

  • priority: 设置指令在模板中的执行顺序,顺序是相对于元素上其他执行而言的,默认为0,从大到小的顺序依次执行。设置优先级的情况比较少,像 ng-repeat,在遍历元素的过程中,需要 angular 先拷贝生成的模板元素,再应用其他指令,所以 ng-repeat 默认的 priority 是1000.
  • terminal: 是否以当前指令的权重为结束界限。如果设置为 true,则节点中小于当前指令的其他指令不会被执行。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">

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

            <div custom-tags2 custom-tags3></div>
        </div>

    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
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 = ‘Alrale‘;
}]);

技术分享

 

Angularjs[27] - 自定义指令(3)(transclude, priority, terminal 属性)

原文:http://www.cnblogs.com/bky-1083/p/6361639.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!