Angular.js+Bootstrap實現手風琴菜單

說是Angular.js+Bootstrap實現手風琴菜單，其實就是用了Bootstrap的樣式而已。

上一篇實現了表格+分頁，接着學習實現的Demo。

主要練習自定義指令，向指令中傳遞參數，老規矩先上效果圖：

<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>

上面是我自定義的指令，菜單存在標題和內容3條用了 ng-repeat來渲染。

指令基本API以下：

 

app.directive('myDirective',function(){
    return {
        //restrict: 默認爲A（屬性，默認值）<div my-directive=''></div> E（元素）C（類名）M（註釋）
        //這裏考慮到瀏覽器的兼容性一般咱們用全部瀏覽器都認識的A類型
        restrict: 'A',
        //優先級設置,默認是0,較大的優先調用
        priority: 0,
        //這個參數用來告訴AngularJS中止運行當前元素上比本指令優先級低的指令。但同當前指令優先級相同的指令仍是會被執行。
        terminal: false,
        //字符串或函數: 字符串<a></a>(指令內容)
        //注：必須存在一個根DOM元素
        //一個能夠接受兩個參數的函數，參數爲tElement和tAttrs，並返回一個表明模板的字符串 
        //function(tElement, tAttrs) { ... }
        template: '', 
        //從指定的url地址加載模板
        templateUrl: '',
        //若是設置了這個參數，值必須爲true 替換指令元素或插入內部
        replace: false,
        //建立一個可以從外部原型繼承做用域的指令，將scope屬性設置爲true
        scope: {
            ngModel: '=', // 將ngModel同指定對象綁定
            onSend: '&', // 將引用傳遞給這個方法
            fromName: '@' // 儲存與fromName相關聯的字符串
        }
        //若是設置了，其值必須爲true，它的默認值是false。
        transclude:'',
        //string
        //function(scope, element, attrs, transclude, otherInjectables) { ... }
        controller:function($scope, $element, $attrs, $transclude) {
            // 控制器邏輯放在這裏
        },
        //controllerAs參數用來設置控制器的別名，能夠以此爲名來發布控制器，而且做用域能夠訪問controllerAs
        controllerAs: '',
        //是否依賴某個指令
        require: '',
        //以編程的方式操做DOM，包括添加監聽器等
        link: function postLink(scope, iElement, iAttrs) {},
        //
        compile: // 返回一個對象或鏈接函數，以下所示：
            function(tElement, tAttrs, transclude) {
                return {
                    pre: function(scope, iElement, iAttrs, controller) { },
                    post: function(scope, iElement, iAttrs, controller) { }
                }
                // 或者
                return function postLink() {  }
            };
    };
})

 

 

如何切換的時候讓其餘的隱藏呢，這裏主要用到指令ng-show，記錄當前點擊的，來隱藏其餘的。

具體代碼註釋以下：

 

<style type="text/css">
    .con {
        margin: 0 auto;
        width: 600px;
        margin-top: 100px;
    }

    .panel {
        width: 580px;
    }

    .panel-heading {
        cursor: pointer;
    }
</style>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="con" ng-app="myApp" ng-controller="myCtrl">
    <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.directive('myPage', function () {
        return {
            restrict: 'EA',
            replace: true,
            transclude: true, //是否將元素內容轉移到模版中
            scope: {
                title: "=pageTitle"
            },
            template: [
                '<div class="panel panel-info">',
                    '<div class="panel-heading" ng-click="toggle();">',
                        '<h3 class="panel-title" >{{title}}</h3>',
                    '</div>',
                    '<div class="panel-body" ng-show="showMe" ng-transclude></div>',
                '</div>'
            ].join(""),
            link: function (scope, element, attrs) {
                scope.showMe = false;
                scope.$parent.addExpander(scope); //保存全部菜單
                scope.toggle = function toggle() {
                    scope.showMe = !scope.showMe; //隱藏顯示
                    scope.$parent.goToExpander(scope);
                }
            }
        };
    })

    app.controller('myCtrl', function ($scope) {
        $scope.expanders = [{
            title: 'AngularJS',
            text: 'AngularJS  誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。'
        }, {
            title: 'jQuery',
            text: 'JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。'
        }, {
            title: 'Bootstrap',
            text: 'Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發者較爲熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。'
        }];
        var expanders = []; //記錄全部菜單
        $scope.addExpander = function (expander) {
            expanders.push(expander);
        };
        $scope.goToExpander = function (selectedExpander) {
            expanders.forEach(function (item, index) {
                if (item != selectedExpander) { //隱藏非當前選項卡
                    item.showMe = false;
                }
            })
        }
    });
</script>