Para mayor detalle ver la referencia abajo.
1) Este es el html principal: portada.html
<head>
<script src="angular.min.js">
</script> <script src="app.js"></script>
</head>
<body>
<div class="clearfix">
<menu></menu>
<menu></menu>
</div>
</body>
</html>
2) Creamos el html que va a ser nuestra directives menu.html
<ul>
4) Agregarle un estilo particular al clase "active"
Referencia sobre este ejemplo.
2) Creamos el html que va a ser nuestra directives menu.html
<li ng-repeat="navLink in navLinks" ng class="navClass('{{navLink.Title}}')">
<a href='{{navLink.Href}}#{{navLink.Title}}'> {{navLink.LinkText}}</a>
</li>
<a href='{{navLink.Href}}#{{navLink.Title}}'> {{navLink.LinkText}}</a>
</li>
</ul>
3) Creamos el archivo js para el cual vamos a crear el directives y el modulo correspondiente: app.js
3) Creamos el archivo js para el cual vamos a crear el directives y el modulo correspondiente: app.js
(function () {
var app = angular.module('portada', []);
app.controller('menuController', ['$scope', '$location', function ($scope, $location) {
$scope.navLinks = [{
Title: 'portada',
LinkText: 'Inicio',
Href : 'portada.html'
},{
Title: 'contacto',
LinkText: 'Contacto',
Href : 'contacto.html'
}];
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'portada';
return page === currentRoute ? 'active' : '';
};
}]);
app.directive('menu', function() {
return {
restrict: 'E',
templateUrl: 'menu.html',
controller:'menuController',
controllerAs: 'menuController'
}
});
})();
Referencia sobre este ejemplo.
No hay comentarios:
Publicar un comentario