Develop Reference

AngularJS Loading Issue

I am using angular to pull content and display on some pages of the site. I have bootstrap drop-down menu in the header. Based on the user login in, some drop-down option are hidden. To achieve this, I used ng-if on the header controller. Everything working fine.
But the issue is, sometimes when I open the site I am able to see hidden drop-down options also and {{userRole}} is displayed as {{userRole}}. why is this happening? Thank you.
Screen shot of issue
In the screen shot, user can see two my profile icons.
var itpApp = angular.module("itpApp",['ngRoute','angular.filter','ui.bootstrap','ngSanitize']);
itpApp.controller("headerController", function($scope, $rootScope) {
var gaR = new GlideAjax('ITPortalUtil0');
gaR.addParam('sysparm_name','u_role');
gaR.getXML(function(response) {
$rootScope.userRole = response.responseXML.documentElement.getAttribute("answer");
$rootScope.$apply();
console.log('user role check: '+$rootScope.userRole);
//$rootScope.userRole = $localStorage.user_role;
});
});
<div class="navbar navbar-default1" ng-controller="headerController">
<div class="navbar-collapse collapse" id="shortMenu">
<ul class="nav navbar-nav">
<li class="dropdown">
My Tickets$[SP]<b class="caret"></b>
<ul class="dropdown-menu" id="menu7">
<li ng-if="userRole =='ess'"><a href="#" role="button" data-toggle="modal" data-target="#myModal" >My Profile</a></li>
<li ng-if="userRole =='itil'">My Profile</li>
</ul>
</li>
</ul>
</div>

How to use ng-template in angular?

I'm writing a client-side angular app and I have a question related to the way I can use angular's ng-template.
So, I have this navbar:
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Create Event</li>
<li></li>
</ul>
</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
</ul>
</div>
</div>
</nav>
Ok, in the last <ul> tag I use ng-include="getTemplate()", where getTemplate is this function:
<script type="text/javascript">
$(function () {
var getTemplate = function () {
return "notauth";
}
})
</script>
Basically, this will return the same template, but I just want this to work before I add more logic to it.
"notauth" template is:
<script type="text/ng-template" id="notauth">
<li><a ui-sref="signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a ui-sref="login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</script>
Note that this is inside my index.html page, because I want my navbar to be the same for all views, but change its template according to user state: if user is logged in use auth template, otherwise use notauth template.
Problem is that this doesn't work and I can't figure out what the problem is.

Declare the function using $scope as follows:
$scope.getTemplate = function () {
return "notauth" ;
console.log("notauth")
}
Then you can call like this:
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
This works correctly.

The reason why your function doesn't work is because you define your function in a function (that is automatically called by jQuery) and is thus only available in the scope of that function.
But even if you were to add the getTemplate() to the global (window) scope, it would still not work as Angular looks for it on the current $scope object.
So the only way you can make this work:
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
Is if you somehow get getTemplate() onto the current $scope or the $rootScope. This can be accomplished by for instance the following code:
angular.module('myApplication', [])
.run(['$rootScope', function($rootScope) {
$rootScope.getTemplate = function() {
return 'notauth';
};
}]);
Do note however that while something like this may work, you're much better of creating a component for this functionality which can then have an injectable controller that can actually perform smart logic.

ng-include="'notauth'" works like this, not ng-include="notauth"
So, try to do something like that.
<script type="text/javascript" >
angular.module('app', []).
controller('MainC', function($scope){
$scope.call = function(){
return 'notauth';
}
})
</script>

How to apply active class in navigation if i used breadcrumb in angular js

I m learning to angular js and read some documents but i have face one problum .
HI i m using a application with navigation as like this
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="dashboard.view">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="aboutus">About</a></li>
<li ui-sref-active="active"><a ui-sref="contactus">Contact</a></li>
</ul>
Now my brodcrome is
Home > About > Carrer
My url is myxyz.com/#/aboutus/carrer
than active class is not apply About but if i click to About page than active class is add.
Can u please tell me what I code write.
Thanks .

What I did on your case was I created a function inside a controller with couple of dependencies and then use ng-class,
storeApp.controller('MyCtrl', function($scope, $location, $http) {
$scope.isActive = function(route) {
return route === $location.path();
}
And then used it in my navigation.
<ul class="nav navbar-nav" ng-controller="MyCtrl">
<li class="hvr-underline-from-left">
<a ng-class="{activeClass:isActive('/store')}" href="#/store">SHOP</a>
</li>
<li class="hvr-underline-from-left">
<a ng-class="{activeClass:isActive('/category/0/0')}" href="#/category/0/0">COLLECTIONS</a>
</li>
</ul>
In this example, make sure you have declared activeClass or what ever class name you want in your CSS

Getting issue while using ui-router of Angular.js

I am getting some issue while using Angular.js Ui-router.First let me to explain my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li>
<li ui-sref-active="active" ><a ui-sref=".stream">College stream</a></li>
<li ui-sref-active="active"><a ui-sref=".dept" >College Department</a></li>
<li class="dropdown " ui-sref-active="active">
<a ui-sref=".res.userrole" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
</li>
<li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li>
<li ui-sref-active="active"><a ui-sref=".role">User Role</a></li>
</ul>
When user is clicking on Resource Management menu the below page is opening.
<div class="container">
<tabset>
<tab ui-sref="dashboard.res.userrole" ui-sref-active="active">
<tab-heading>Add User Role</tab-heading>
</tab>
<tab ui-sref="dashboard.res.course" ui-sref-active="active">
<tab-heading>Add Course</tab-heading>
</tab>
</tabset>
<div ui-view></div>
</div>
Here i need if user will select Add course tab the main menu Resource Management will be hignlight/active.In this case only it is active when user is clicking Add User Role tab.Please check my below route file.
.state('dashboard.res', {
url: '/res',
templateUrl: 'dashboardview/res.html',
controller: 'resController'
})
.state('dashboard.res.userrole', {
url: '/userrole',
templateUrl: 'dashboardview/userrole.html',
controller: 'resourceuserroleController'
})
.state('dashboard.res.course', {
url: '/course',
templateUrl: 'dashboardview/course.html',
controller: 'resourcecourseController'
})
Here i have also another issue.Suppose user is refreshing the page staying on any tab select the ,the both tab are getting highlighted.Actually here i need if Add user roletab will select the parent menu will be highlight and same forAdd course`.I was following this plunkr link but in my case its not working as per required.Please help me to resolve this issue.

ng-click doesn't work on anchor element

Q1: I tried to use nav in bootstrap to make a navigation bar and bound ng-click to the anchors.
However after I click the anchor link,there is nothing happened.
Q2: I've noticed that the anchor link clicked won't be active by setting bg-color to it? How can this be implemented?
Here is the JSfiddle...
<div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
<li class="active">All Suites
</li>
<li><a ng-click="handleClick">Suite1</a>
</li>
<li>Suite2
</li>
<li>Suite3
</li>
</ul>

The brackets for function invocation are missing. You should have:
ng-click="handleClick()"

Answering Q2:
Maybe there are smarter solutions, but this one works as well:
angular.module('myApp').controller('MenuCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$rootScope.$on('$locationChangeSuccess', function () {
var path = $location.path();
// you may apply logic on the path (group together in case of dropdown-menu e.g.)
$scope.topMenu = path;
});
}
]);
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
ng-controller="MenuCtrl">
<div class="container-fluid">
<div class="navbar-header">
<!-- ... -->
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{active: topMenu == '/'}">
Home</li>
<li ng-class="{active: topMenu == '/about'}">
About</li>
<!-- more... -->
</ul>
</div>
</div>
</div>

I have Updated your code. Add ng-app directive to your body tag. And In your html change ng-click="handleClick" to ng-click="handleClick()"
<body ng-app="app"><div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
<li class="active">All Suites
</li>
<li><a ng-click="handleClick()">Suite1</a>
</li>
<li>Suite2
</li>
<li>Suite3
</li>
</ul>
</div></body>
and our JS code is
var executionAPP = angular.module('app',[])//register your app
executionAPP.controller('SuiteSectionCtrl',['$scope',function($scope){
$scope.oneAtATime = true;
$scope.testSuites = [{title:"TestSuite1",content:"TestContent1"},
{title:"TestSuite2",content:"TestContent2"},
{title:"TestSuite3",content:"TestContent3"},
{title:"TestSuite4",content:"TestContent4"},
{title:"TestSuite5",content:"TestContent5"}];
$scope.handleClick = function(){
alert('Accordion clicked');
};
}]);
Updated Fiddle...