<https://lh3.googleusercontent.com/-tig3jWSHWtY/VVGqF-35tBI/AAAAAAAAAOI/WOr1_cF7sRM/s1600/with-ui-router.PNG> with-ui-router.js loaded
<https://lh3.googleusercontent.com/-F9evYy0ycHY/VVGp5F1wmrI/AAAAAAAAAOA/-HkHBb3ObMk/s1600/without-ui-router.PNG> without-ui-router.js El martes, 12 de mayo de 2015, 9:15:17 (UTC+2), Antonio Pérez García escribió: > > Hi !! > > I've a problem when I put some custom directives and ui-view in a > index.html file. The directives don't appear in the browser but the content > of ui-view yes. What am I doing wrong? > If I don't load app.route.js, everything works fine. > Thanks in advance. > > My html code: > > <!DOCTYPE html> > <body> > <div class="main" > > <!-- custom directives --> > <div comp-navbar-bpm ></div> > <div comp-menu-bpm ></div> > <div class="page-content-main"> > <div class="container-fluid" ui-view> > </div> > </div> > </div> > > > <script src="bower_components/angular/angular.js"></script> > <script src="bower_components/angular-loader/angular-loader.js" > ></script> > <script src= > "bower_components/angular-ui-router/release/angular-ui-router.js" > ></script> > <!-- inject:js --> > <!-- Bootstrapping --> > <script src="app/app.module.js"></script> > <script src="app/app.route.js"></script> > <!-- Navbar --> > <script src="app/components/navbar.module.js"></script> > <script src="app/components/navbar.service.js"></script> > <script src="app/components/navbar.directive.js"></script> > <script src="app/components/sidebar.service.js"></script> > <script src="app/components/sidebar.directive.js"></script> > </body> > </html> > > > app.route.js: > (function() { > 'use strict'; > > angular > .module('ebpm', ['ui.router']) > .config(configRoutes); > > configRoutes.$inject = ['$urlRouterProvider', '$stateProvider']; > > function configRoutes($urlRouterProvider, $stateProvider) { > $urlRouterProvider.otherwise('/home'); > > $stateProvider.state('home', { > url: '/home', > templateUrl: 'app/prueba.html' > }); > } > > })(); > > > navbar.directive.js: > (function() { > 'use strict'; > > angular > .module('ebpm.navbar') > .directive('compNavbarBpm', compNavbarBpm); > > function compNavbarBpm() { > var directive = { > templateUrl: 'app/components/navbar.html', > replace: true, > restrict: 'EA', > controller: NavbarCtrl, > controllerAs: 'navBpm', > bindToController: true // because the scope is isolate. > }; > > return directive; > } > > // Inject the service. > NavbarCtrl.$inject = ['$scope', 'dataConnectionSrv']; > > function NavbarCtrl($scope, dataConnectionSrv) { > var navBpm = this; > > // Get conn data. > dataConnectionSrv.getConn(). > then(function(data) { > (data.error) ? noty({type: "error",text: 'navbar.directive.js: > '+data.error}) : null; > navBpm.empName = data.empName; > navBpm.usrName = data.usrName; > }, function(data) { > var e = noty({type: "error",text: 'navbar.directive.js: Error > al obtener los datos de configuración de BPM.'}); > }); > > // Control over icon and sidebar. > $scope.toggleMenuBpm = function() { > $(".cmn-toggle-switch").toggleClass("active"); > $(".main").toggleClass("toggled"); > } > > } > > })(); > > > navbar.html > <nav class="navbar navbar-inverse navbar-fixed-top" > > <div class="container-fluid"> > <div class="navbar-header"> > <button class="cmn-toggle-switch cmn-toggle-switch__htx" > data-ng-click="toggleMenuBpm()"> > <span>toggle menu</span> > </button> > <!--<span class="navbar-brand">Exper BPM</span> --> > </div> > <div id="navbar" class="navbar-collapse collapse"> > <ul class="nav navbar-nav navbar-left"> > <li class="navbar-brand navbar-brand-custom">Expert BPM > </li> > </ul> > <ul class="nav navbar-nav navbar-right"> > <li ><a href="#">{{navBpm.empName}}</a></li> > <li class="dropdown"><a href="#" class="dropdown-toggle" > data-toggle="dropdown"><i > class="glyphicon glyphicon-user"></i> > {{navBpm.usrName}} <b class="caret"></b></a> > <ul class="dropdown-menu"> > <li><a href="#"><i class="glyphicon > glyphicon-user"></i> Perfil</a></li> > <li><a href="#"><i class="glyphicon glyphicon-cog" > ></i> Configuración</a></li> > <li class="divider"></li> > <li><a href="#"><i class="glyphicon glyphicon-off" > ></i> Salir</a></li> > </ul> > </li> > </ul> > </div> > </div> > </nav> > > -- 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.
