Hello,
To solve the issue, I created a directive that relies upon jQuery.
Though this solution works, I wonder if it is the best way to do.
Note : I attached the code of my directive to this post.
Here is the code :
*HTML*
<!DOCTYPE html>
<html lang="fr" ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body ng-controller="PageController as PageCtrl">
<ul>
<li><a href="#" ng-click="view = 'home'">Home</a></li>
<li><a href="#" ng-click="view = 'login'">Login</a></li>
<li><a href="#" ng-click="view =
'inscription'">Inscription</a></li>
<li><a href="#" ng-click="view = 'about'">About</a></li>
</ul>
<switch-faders tab="view">
<div tab="home">This is the home</div>
<div tab="login">This is the login page</div>
<div tab="inscription">This is the inscription page</div>
<div tab="about">About the site</div>
</switch-faders>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.js";></script>
<script src="app.js"></script>
</body>
</html>
*JS*
(function() {
var app = angular.module('app', ['ngAnimate', 'ngRoute']);
var pageCtrl = function($scope) {
// Set some scope's properties.
$scope.view = "home";
};
app.controller('PageController', ['$scope', pageCtrl]);
var switchFaders = function() {
var directive = {};
var tabs = {};
var lastTab = null;
directive.compile = function(element, attributes) {
// One time initialization.
$(element).children("[tab]").each(function(index, element) {
$(element).hide();
tabs[$(element).attr('tab')] = $(element);
});
return function(inScope, inElement, inAttrs) {
inScope.$watch(inAttrs.tab, function(inValue) {
if (lastTab !== null) {
tabs[lastTab].fadeOut(500, function() {
tabs[inValue].fadeIn(500);
});
} else {
tabs[inValue].fadeIn(500);
}
lastTab = inValue;
});
};
};
return directive;
};
app.directive('switchFaders', [switchFaders]);
})();
Am I doing the wright thing?
Thanks,
Denis
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
ex.tar
Description: Unix tar archive
