anuglarJS directive综合实例

最新推荐文章于 2019-02-28 18:43:18 发布

ristal

最新推荐文章于 2019-02-28 18:43:18 发布

阅读量1.8k

点赞数

分类专栏： AngularJs WEB前端

WEB前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

AngularJs

6 篇文章 0 订阅

订阅专栏

实例5：一个综合的例子

JS代码：

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                   + '<div class="title" ng-click="toggle()">{{title}}</div>'
                   + '<div class="body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];
});
 
HTML代码：
 
<html ng-app="expanderModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="../angular-1.0.3/angular.min.js"></script>
        <link rel="stylesheet" type="text/css" href="Accordion.css"/>
    </head>
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>
    <script src="Accordion.js"></script>
</html>

CSS代码：

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

运行效果：

这个例子主要的难点在于如何在子Expander里面访问外层Accordion的scope中的数据

compile阶段进行标签解析和变换，link阶段进行数据绑定等操作。

原址：http://damoqiongqiu.iteye.com/blog/1917971

另一个指令讲的比较好的：http://www.zouyesheng.com/angular.html#toc50

ristal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
anuglarJS directive综合实例

实例5：一个综合的例子JS代码：var expModule=angular.module('expanderModule',[])expModule.directive('accordion', function() { return { restrict : 'EA', replace : true, transclude :
复制链接

扫一扫

专栏目录