app.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. angular.module('tasks', ['ngRoute'])
  2. .directive('tabs', function () {
  3. return {
  4. restrict: 'A',
  5. transclude: true,
  6. scope: { style: "@tabs" },
  7. controller: [ "$scope", function ($scope) {
  8. $scope.panels = [];
  9. $scope.select = function (i) {
  10. angular.forEach($scope.panels, function (p) {
  11. p.selected = false;
  12. });
  13. $scope.panels[i].selected = true;
  14. };
  15. this.addPanel = function (panel) {
  16. if ($scope.panels.length === 0) {
  17. panel.selected = true;
  18. }
  19. $scope.panels.push(panel);
  20. };
  21. }],
  22. template: '<div class="tabbable">' +
  23. '<ul class="nav nav-{{style||\'pills\'}}">' +
  24. '<li ng-repeat="panel in panels" ng-class="{active:panel.selected}">' +
  25. '<a href="" ng-click="select($index)">{{panel.title}}</a>' +
  26. '</li>' +
  27. '</ul><br/>' +
  28. '<div class="tab-content" ng-transclude></div>' +
  29. '</div>',
  30. replace: true
  31. };
  32. })
  33. .directive('panel', function () {
  34. return {
  35. require: '^tabs',
  36. restrict: 'A',
  37. transclude: true,
  38. scope: { title: "@panel" },
  39. link: function (scope, element, attrs, tabsCtrl) {
  40. tabsCtrl.addPanel(scope);
  41. },
  42. template: '<div class="tab-panel" ng-show="selected" ng-transclude>' +
  43. '</div>',
  44. replace: true
  45. };
  46. })
  47. .config(function ($routeProvider) {
  48. $routeProvider.
  49. when('/', {templateUrl: 'templates/main.html', controller: 'MainCtrl'}).
  50. otherwise({redirectTo: '/'});
  51. });