diff options
| -rw-r--r-- | alias-angular/app/index.html | 9 | ||||
| -rw-r--r-- | alias-angular/app/js/alias.js | 2 | ||||
| -rw-r--r-- | alias-angular/app/js/controllers.js | 3 | ||||
| -rw-r--r-- | alias-angular/app/js/directives.js | 33 |
4 files changed, 32 insertions, 15 deletions
diff --git a/alias-angular/app/index.html b/alias-angular/app/index.html index 676dd13..fba5335 100644 --- a/alias-angular/app/index.html +++ b/alias-angular/app/index.html @@ -38,19 +38,18 @@ </div> <div id="main" ng-controller="MsgCtl"> <ul class="nav nav-tabs"> - <li ng-init="activeConversation=''" ng-repeat="conversation in conversations" ng-class="isActive(conversation)" ng-click="activate(conversation)"> + <li ng-repeat="conversation in conversations" ng-click="activate(conversation)"> <!-- why does writing ng-click="activeConversation=conversation" doesn't work? --> - <a ng-href="#repeat">{{conversation}} <i class="icon-remove" ng-click="delete(conversation)"></i></a> + <a href="#repeat">{{conversation}} <i class="icon-remove" ng-click="delete(conversation)"></i></a> </li> </ul> <div class="tab-content"> - <div class="tab-pane active" id="repeat" ng-show="activeConversation.length">Je suis {{activeConversation}}</div> + <div class="tab-pane" id="repeat">Je suis {{activeConversation}}</div> </div> </div> - <script src="lib/angular/angular.js"></script> <script src="lib/jquery-1.7.2.min.js"></script> + <script src="lib/angular/angular.js"></script> <script src="lib/underscore-min.js"></script> - <!-- <script src="lib/bootstrap-tab.js"></script> --> <script src="lib/config.js"></script> <script src="js/alias.js"></script> <script src="lib/strophe.js"></script> diff --git a/alias-angular/app/js/alias.js b/alias-angular/app/js/alias.js index b127223..01424cc 100644 --- a/alias-angular/app/js/alias.js +++ b/alias-angular/app/js/alias.js @@ -1,3 +1,3 @@ 'use strict'; // Declare app level module which depends on filters, and services -angular.module('Alias', ['Alias.services','Alias.filters']);
\ No newline at end of file +angular.module('Alias', ['Alias.services', 'Alias.filters', 'Alias.directives']);
\ No newline at end of file diff --git a/alias-angular/app/js/controllers.js b/alias-angular/app/js/controllers.js index 3d88dcc..909754e 100644 --- a/alias-angular/app/js/controllers.js +++ b/alias-angular/app/js/controllers.js @@ -104,9 +104,6 @@ function MsgCtl($scope, $log) { $scope.activeConversation = contact; } }); - $scope.isActive = function(conversation) { - return ($scope.activeConversation == conversation) ? 'active' : ''; - }; $scope.delete = function(conversation) { $scope.conversations.splice(_.indexOf($scope.conversations, conversation),1); }; diff --git a/alias-angular/app/js/directives.js b/alias-angular/app/js/directives.js index 8ed47bb..3b9b652 100644 --- a/alias-angular/app/js/directives.js +++ b/alias-angular/app/js/directives.js @@ -2,9 +2,30 @@ /* http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive */ -angular.module('myApp.directives', []). - directive('appVersion', ['version', function(version) { - return function(scope, elm, attrs) { - elm.text(version); - }; - }]); +angular.module('Alias.directives', []). + directive('navTabs', function($log) { + var directiveDefinition = { + restrict: 'C', + link: function(scope, elm, attrs) { + var tabs = elm.find('li'); + var selectedTab = tabs.filter('.active'); + if (!selectedTab.length) { + selectedTab = tabs.filter(':first'); + selectedTab.addClass('active'); + } + var selectedPane = $(selectedTab.find('a').attr('href')); + selectedPane.addClass('active'); + + elm.on('click', function(event) { + selectedTab.removeClass('active'); + selectedPane.removeClass('active'); + selectedTab = angular.element(event.target).parent(); + selectedPane = $(selectedTab.find('a').attr('href')); + selectedTab.addClass('active'); + selectedPane.addClass('active'); + event.preventDefault(); + }); + } + }; + return directiveDefinition; + }); |