AngularJS1.X学学笔记9-自定义指令(中)

  前天好大的雨啊!上一节中,我们的吩咐中的工厂函数中都是回来了一个叫做链接函数的老工人函数,事实上大家的厂子函数也是足以回到一个目的,那个目的里面可以分包众多的习性,那使得大家可以创制更狠抓劲的吩咐。

一、link属性

  这么些天性的值是一个函数,叫做链接函数。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>link</title>
</head>
<body ng-controller="directiveCtrul">
    <h1 get-data id="dff" class="haha"></h1>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = "你好啊!";
        })
        .directive("getData",function(){
            return {
                link:function(scope,element,attrs){
                    console.log(scope['data']);
                }
            }
        })
    </script>
</body>
</html>

   有木有发现那跟上文中的首先个例证大约完全相同,只是将格外再次回到的函数放到了一个目的的link属性中。

二、restrict

  restrict属性定义了我们的吩咐应该被如何使用。E表示作为一个成分,A表示作为一性格质,C表示作为一个类,M表示作为一个注释

  

directive("getData",function(){
            return {
                link:function(scope,element,attrs){
                    console.log(scope['data']);
                },
                restrict:"ECA"
            }
        })

<h1 get-data id=”dff” class=”haha”></h1><!– 用作属性A
–>
<get-data></get-data> <!– 用作元素E –>
<h1 class=”get-data”></h1> <!– 用作类C –>

 

  借使用错了会怎么?若是您不是透过指令获取数据的,那么只是不干活而已;其余,假如您依靠了命令,那么恐怕会引用错误。

三、 template,templateUrl

  都是用来指定一个模板的。

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>link</title>
</head>
<body ng-controller="directiveCtrul">
    <div get-data="data" id="dff" class="haha"></div><!-- 用作属性A -->
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = "你好啊!";
        })
        .directive("getData",function(){
            return {
                link:function(scope,element,attrs){
                    scope.data = scope[attrs['getData']];
                },
                restrict:"A",
                template:"<h1>{{data}}</h1>"
            }
        })
    </script>
</body>
</html>

 

   还阔以用函数指定模板

  

directive("getData",function(){
            return {
                link:function(scope,element,attrs){
                    scope.data = scope[attrs['getData']];
                },
                restrict:"A",
                template:function(){return "<h1>{{data}}</h1>"}
            }
        })

 

  看看指定一个表面模板

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>link</title>
</head>
<body ng-controller="directiveCtrul">
    <div get-data="data" id="dff" class="haha"></div><!-- 用作属性A -->
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = "你好啊!";
        })
        .directive("getData",function(){
            return {
                link:function(scope,element,attrs){
                    scope.data = scope[attrs['getData']];
                },
                restrict:"A",
                templateUrl:'h.html'
            }
        })
    </script>
</body>
</html>

 

   在大家的同级目录中有个称呼h.html的文书,里面定义了我们的模板。这一个外部模板实际上是发起了五遍ajax请求,将请求的文件添加到了指定地方。

  图片 1

四、replace

  这几个天性决定了我们的运用指令的至极成分是不是合宜被互换掉。

  举个例证,上边的老大测试生成的和布局是那样的

图片 2

  但我们将replace属性置为true时,结构就是那般的了

图片 3

  看到没,那个div没了。

  本文到此截止,我决定将功效域的管制置于下一篇小说,因为本身控制先休息一下。  

 

相关文章