• Angularjs[27]


    • 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';
    }]);

  • 相关阅读:
    CSS3中各种属性的意思
    Python全栈Day 18部分知识点
    Python全栈Day 17部分知识点
    Python全栈Day 16部分知识点
    Python全栈Day 15部分知识点
    Python全栈Day 14部分知识点
    Python全栈Day 13部分知识点
    Python全栈Day 12部分知识点
    Python全栈Day 11部分知识点
    时间复杂度和空间复杂度
  • 原文地址:https://www.cnblogs.com/bky-1083/p/6361639.html
Copyright © 2020-2023  润新知