AngularJS1.X学习笔记9-自定义指令（中）

最新推荐文章于 2019-11-13 15:25:07 发布

会做饭的技术男

最新推荐文章于 2019-11-13 15:25:07 发布

阅读量133

点赞数

分类专栏：前端文章标签： angularjs angularjs1.x学习笔记

原文链接：https://www.mk2048.com/blog/blog.php?id=h1ijhj2kcibb&title=AngularJS1.X%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B09-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%EF%BC%88%E4%B8%AD%EF%BC%89

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

　　今天好大的雨啊！上一节中，我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数，事实上我们的工厂函数也是可以返回一个对象，这个对象里面可以包含很多的属性，这使得我们可以创建更加强大的指令。

一、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"
            }
        })

　　假如用错了会怎样？如果你不是通过指令获取数据的，那么只是不工作而已;另外，如果你依赖了指令，那么可能会引用错误。

三、 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>