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.
