angular自定义指令

最新推荐文章于 2023-10-01 23:38:24 发布

hanchayi

最新推荐文章于 2023-10-01 23:38:24 发布

阅读量409

点赞数

分类专栏： web前端文章标签： angular

本文链接：https://blog.csdn.net/hanchayi/article/details/51258176

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简介

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>'
        }
    })