Angularjs进修笔记指令

自定义指令

angularjs中有许多内置指令,平常都是以ng开首的;比方:ng-app,ng-click,ng-repeat等等。本文引见angularjs的自定义指令的用法。

指令的定义

首先在html标签处设置ng-app的属性值,然后在js文件中就能够挪用angular.module获得一个module,末了就能够用module.directive定义一个指令。代码以下:

html文件

<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
    <meta charset="UTF-8">
    <title>directive</title>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="./directive.js"></script>
</head>
<body>

    <div my-directive></div>
</body>
</html>

js文件

var app = angular.module('directive',[]);
app.directive('myDirective',function(){
   return {
       restrict:"A",
       require:true,
       template:"<span>hello angular</span>",
   };
});

这个例子只运用了directive的最简朴的参数设置,下面是一个细致的参数设置列表

app.directive('myDirective', function factory(injectables) {
    return {
        restrict: string,//指令的运用体式格局,包含标签,属性,类,解释
        priority: number,//指令实行的优先级
        template: string,//指令运用的模板,用HTML字符串的情势示意
        templateUrl: string,//从指定的url地点加载模板
        replace: bool,//是不是用模板替代当前元素,若为false,则append在当前元素上
        transclude: bool,//是不是将当前元素的内容转移到模板中
        scope: bool or object,//指定指令的作用域
        controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令举行交互的接口函数
        require: string,//指定须要依靠的其他指令
        link: function postLink(scope, iElement, iAttrs) {...},//以编程的体式格局操纵DOM,包含增添监听器等
        compile: function compile(tElement, tAttrs, transclude){
            return: {
                pre: function preLink(scope, iElement, iAttrs, controller){...},
                post: function postLink(scope, iElement, iAttrs, controller){...}
            }
        }
    };
});

下面引见几个经常使用的参数

restrict

四个值”A”,”E”,”C”,”M”,离别代码属性,标签,类,解释,以下:

restrict:"A"   <div my-directive></div>
restrict:"E"   <my-directive></my-directive>
restrict:"C"   <div class="my-diretive"></div>
restrict:"M"   <!--directive:my-directive-->

只测试了A和E的值,感兴趣的朋侪能够测试一下其他。

template 和 templateUrl

这两个参数只须要设置一个就行。

transclude

该参数的意义是替代指令的内容,变动上面的例子。html变动部份

<div my-directive>hello angular</div>

js变动部份

 app.directive('myDirective',function(){
    return {
        restrict:"A",
        require:true,
        transclude:true,//增添transclude参数的设置
        template:"<div><span ng-transclude></span></div>",//将指令的内容替代到span标签下
    };
 });

scope

false               默认值。运用父作用域作为本身的作用域
true                新建一个作用域,该作用域继续父作用域
javascript对象       

当scope为javascript对象时,键值对的情势定义。直接看例子吧!
html:

<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
    <meta charset="UTF-8">
    <title>directive</title>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="./directive.js"></script>
</head>
<body>
    <div ng-controller="directive">
        <div my-directive etitle="title">{{text}}</div>
    </div>
</body>
</html>

js:

var app = angular.module('directive',[]);
app.directive('myDirective',function(){
    return {
        restrict:'A',
        template:'<div><span style="background-color:red;">{{mytitle}}</span><div ng-transclude></div></div>',
        require:true,
        replace:true,
        transclude:true,
        //将etitle属性绑定到父控制器的scope域中
        scope:{
            mytitle:'=etitle'
        },
    }
});
app.controller('directive',function($scope){
    $scope.title = "进修";
    $scope.text = "angular js观点多";
});

link

link的值是一个function,平经常使用在在dom上绑定行动的。请看下面完成的一个摺叠面板的例子。

<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
    <meta charset="UTF-8">
    <title>directive</title>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="./directive.js"></script>
</head>
<body>
    <div ng-controller="directive">
        <expander etitle="title">{{text}}</expander>
    </div>
</body>
</html>
var app = angular.module('directive',[]);
app.directive('expander',function(){
    return {
        restrict:'E',
        template:'<div><span style="background-color:red;" ng-click="toggleText()">{{mytitle}}</span><div ng-transclude ng-show="showText"></div></div>',
        require:true,
        replace:true,
        transclude:true,
        //将etitle属性绑定到父控制器的scope域中
        scope:{
            mytitle:'=etitle'
        },
        link: function(scope,element,attr,accordionCtrl){
            scope.showText = false;
            scope.toggleText = function(){
                scope.showText = ! scope.showText;
            }
        }
    }
});
app.controller('directive',function($scope){
    $scope.title = "angular 进修";
    $scope.text = "angular js观点多";
});

expander指令中的link参数中增添了showText的值和toggleText的点击函数。

末了,再看一个多个摺叠面板的例子

<!DOCTYPE html>
<html ng-app="directive">
<head lang="en">
    <meta charset="UTF-8">
    <title>directive</title>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="./directive.js"></script>
</head>
<body>
    <div ng-controller="directive">
        <accordion>
            <expander ng-repeat="expander in expanders" etitle="expander.title">{{expander.text}}</expander>
        </accordion>
    </div>
</body>
</html>

ng-repeat方便expanders的一切元素

var app = angular.module('directive',[]);
app.directive('expander',function(){
    return {
        restrict:'E',
        template:'<div><span style="background-color:red;" ng-click="toggleText()">{{mytitle}}</span><div ng-transclude ng-show="showText"></div></div>',
        require:'^?accordion',
        replace:true,
        transclude:true,
        //将etitle属性绑定到父控制器的scope域中
        scope:{
            mytitle:'=etitle'
        },
        link: function(scope,element,attr,accordionCtrl){
            scope.showText = false;
            accordionCtrl.addExpander(scope);
            scope.toggleText = function(){
                scope.showText = ! scope.showText;
                accordionCtrl.getOpened(scope);
            }
        }
    }
});
app.controller('directive',function($scope){
    $scope.expanders = [
        {title:"angular",text:"angular js观点多"},
        {title:"react",text:"react + reduce + ui路由机制"}
    ];
});

app.directive('accordion',function(){
   return {
       restrict:"E",
       template:'<div ng-transclude></div>',
       replace:true,
       transclude:true,
       controller:function(){
           var expanders = [];

           this.getOpened = function(selectExpander){
               angular.forEach(expanders,function(e){
                    if (selectExpander != e){
                        e.showText = false;
                    }
               });
           }

           this.addExpander = function(e){
               expanders.push(e);
           }
       }
   }
});

demo源码地点

    原文作者:wangliuzhan
    原文地址: https://segmentfault.com/a/1190000004907484
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞