angularjs时间轴

最新推荐文章于 2020-01-20 12:09:07 发布

Wicho开源开发中

最新推荐文章于 2020-01-20 12:09:07 发布

阅读量4.1k

点赞数 2

分类专栏：个人文章 angularjs 时间轴技术文档

本文链接：https://blog.csdn.net/shwicho/article/details/46774961

版权

1、炫酷的图片是开端啊

2、前端html 代码

	<div class="container-fluid row">
            <timelineaxis ng-show="paramId>0">
                <timeaxis-item ng-repeat="item in items">
                    <a href="#/taxrm/edit/{
  {item.versionid}}" ng-class="{'active':paramId==item.versionid}">
                        <timeaxis-point></timeaxis-point>
                        <timeaxis-panel>{
  {item.content}}</timeaxis-panel>
                    </a>
                </timeaxis-item>
            </timelineaxis>
            <div class="timeaxis-hide" ng-show="paramId>0" timeaxis-hide ng-click="hide()"></div>
        </div>

3、angular directive

var TaxApp = angular.module('MyApp');
TaxApp.directive("timelineaxis", function () {
    return {
        restrict: 'AE',
        transclude: true,
        template: '<div class="timeaxis-warpper" ><ul class="timeaxis" ng-transclude></ul></div>'
    };
});

TaxApp.directive("timeaxisItem", function () {
    return {
        require: '^timeaxis',
        restrict: 'AE',
        transclude: true,
        template: '<li ng-class-even="\'timeaxis-inverted\'" ng-transclude ></li>'
    };
});

TaxApp.directive("timeaxisPoint", function () {
    return {
        require: '^timeaxisItem',
        restrict: 'AE',