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没了。

  本文到此结束,我主宰拿作用域的田间管理置于下一致篇稿子,因为自己说了算先休息一下。  

 

相关文章