angular自定义指令

来源：互联网发布：聚合tv软件编辑：程序博客网时间：2024/06/02 13:43

- 简介
- 指令基础
- tabs示例

简介

angular拥有强大的指令功能，其自定义指令能让我们将很多模块组件话。这样我们的代码的复用及有效性将大大提高。 --[文档地址](http://docs.angularjs.cn/api/)

指令基础

restrict (A)attribute (E)element (C)class (M)comment
scope 创建指令的作用范围 @传递一个字符串 =绑定父域的一个属性 &使用父域的函数
replace 是否替换
tansclude 包含其中内容

angular.module('moduleName').directive(function(){    var directive = {        restrict: 'E', //限制作为属性还是元素等        scope: {  //设置指令对应的作用域            name: '@', //name值传递 字符串 单向数据绑定            amount: '=', //amount引用传递 双向绑定            save: '&'    //保存操作        }，        template:   //模版             "<div> sdf<div>",        replace: ture， //是否替换原始标记        transclude: false，// 不复制原始html内容        controller: moduleController，//控制器        link: function(scope, element, attrs, controller)    }    //定义controller    fucntion moduleController() {    }    return directive;})

tabs示例

html部分:

<body ng-app='app'>    <tabs>        <pane title='first tab'>            <div>this is first content</div>        </pane>        <pane title='second tab'>            <div>this is second content</div>        </pane>    </tabs></body>

js部分:

angular.module('app', [])    .directive('tabs', function() {        return {            restrict: 'E',            tansclude: true,            scope:{},            controller:['$scope', function($scope) {                var panes = $scope.panes = [];                $scope.select = function(pane) {                    angular.forEach(panes, function(pane) {                        pane.selected = false;                    })                    pane.selected = true;                }                this.addPane = function(pane) {                    if(panes.length == 0){                        $scope.select(pane);                    }                    panes.push(pane);                }            }],            template:                '<div class='tabable'>' +                    '<ul class="nav nav-tabs">' +                         '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+                            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +                        '</li>' +                    '</ul>' +                '</div>',            replace: true        }    })    .directive('pane', function() {        return {            restrict: 'E',            require: '^tabs'//???,            transclude: true,            replace: true,            scope: {                title: '@'            ｝            link: function(scope, element, attrs, tabsCtrl) {                tabsCtrl.addPanel(scope);            }            template:                '<div class="tabs-pane" ng-click={active: selected} ng-transclude>' +                '</div>'        }    })

0 0