• Anaular指令详解


    目录:directive()   restrict   replace   template   templateUrl  scope  transclude   ng-transclude   controller

    directive()

    自定义指令,第一个参数是自定义指令的名字,第二个参数是一个函数,这个函数的返回值就是自定义指令该干的事情。

     //自定义指令指定控制器的名字
                .directive("myDirective",function(){
                    return{
                        
                    }
                })

    restrict

    指定调用自定义指令的方式:A属性/E标签/C类/M注释。推荐用属性的形式调用自定义指令。

    .directive("myDirective",function(){
                    return{
                        //指定此指令用属性调用
                        restrict:'A'
                        
                    }
                })

    replace

    规定自定义指令模板是被包含在指令元素里面还是替换自定义指令,true表示模板替换视图中的自定义指令。false是默认值,表示模板被嵌套在自定义指令中。

    .directive("myDirective",function(){
                    return{
                        
                        //规定调用指令的方式
                        restrict:'A',
    
                        //模板替换自定义指令
                        replace:true,
    
                        //定义模板
                        template:'<a href="http://www.baidu.com">点我跳到百度<span>{{my}}</span></a>'
                    }
                })

    template

    定义模板,值是一个html元素的字符串。参考replace代码

    templateUrl

    同template相似,值是一个引入外部模板的路径,不能跨域。

    .directive("myDirective",function(){
                    return{
    
                        //规定调用指令的方式
                        restrict:'A',
    
                        //模板替换视图中的指令
                        replace:true,
    
                        //定义模板路径
                        templateUrl:'../tem.html'
                    }
                })

    scope

    创建隔离作用域,值为true时会继承父级作用域,创建一个新的作用域,值设置为一个对象时,不会继承父级作用域。使用@符号指定与视图中的数据的绑定。

    transclude   ng-transclude

    值为true时表示将页面自定义指令中的子元素添加到模板里带有 ng-transclude 属性的元素的下面

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="../../Angular/angular.min.js"></script>
    </head>
    <body>
    <div sidebox title="Links">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </div>
    <div ng-controller="myController">
        <div sidebox title="ttt">
            <a href="">{{data}}</a>
            <a href="">ddddd</a>
            <a href="">dddd</a>
            <a href="">dddd</a>
            <a href="">ddddd</a>
        </div>
    </div>
    
    <script>
        angular.module("myApp",[])
                .controller("myController",function($scope){
                    $scope.data = "大厨的笔记"
                })
                .directive("sidebox",function(){
                    return{
                        restrict:"EA",
                        scope:{
                            title:'@'
                        },
                        transclude:true,
                        template:'<div class="sidebox">' +
                                 '   <div>' +
                                 '       <h2>{{title}}</h2>' +
                                 '       <span ng-transclude>' +//把自定义指令里的代码放到带有ng-transclude指令的地方
                                 '       </span>' +
                                 '   </div>' +
                                 '</div>'
                    }
                })
    </script>
    </body>
    </html>

    controller

    值是一个字符串表示在指定自定义指令的控制器字符串就是对应的控制器的名字,值还可以是一个函数,表示当前指令的一个匿名控制器。

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="../../Angular/angular.min.js"></script>
    </head>
    <body>
    <div my-directive title="123333">
    
    </div>
    
    <div chef-controller>
    
    </div>
    <script>
        angular.module("myApp",[])
                //控制器
                .controller("myController",function($scope){
                    $scope.data = "自定义指令的指定控制器"
                })
    
                //自定义指令指定控制器的名字
                .directive("myDirective",function(){
                    return{
                        restrict:'A',
                        scope:{},
    
                        //指定自定义指令的控制器名字
                        controller:'myController',
                        template:'<a>{{title}}</a><span>{{data}}</span>'
                    }
                })
    
                //指定自定义指令的匿名控制器
                .directive("chefController",function(){
                    return{
                        restrict:"A",
                        scope:{
                            title:'@'
                        },
                        template:'<a>{{title}}</a>',
    
                        //指令内部的匿名控制器
                        controller:function($scope){
                            $scope.title = "内部定义匿名控制器";
                        }
                    }
                })
    </script>
    </body>
    </html>
  • 相关阅读:
    webpack管理资源
    webpack缓存
    webpack起步
    openssl命令使用
    linux系统安装中文字体-----
    HTML转成PDF的4个前端方法----但都被我拒绝了,我选择后端方法(这才是吊!)
    HTML页面如何导出pdf
    为什么装了easyless插件,vscode还是不能用?
    JSON格式错误,json_decode中true和JSON_UNESCAPED_SLASHES的用法
    tp5条件判断,in,notin,between,if等
  • 原文地址:https://www.cnblogs.com/chefweb/p/6081585.html
Copyright © 2020-2023  润新知