angular.module('myApp')
.component('sideNav', {
controller: function SideNavController($scope) {
$scope.navigation = {};
$scope.click = function(key) {
$scope.navigation[key] = !$scope.navigation[key];
}
},
templateUrl: 'components/side-nav/side-nav.html',
})
to be used as simply
<side-nav></side-nav>
The template is
<!-- other li items -->
<li ng-init="navigation.charts = false"
ng-click="click('charts')">
<a href="#">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts {{ navigation.charts }}
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
ng-show="navigation.charts">
<li>
Charts
</li>
<li>
Graphs
</li>
</ul>
</li>
navigation.charts is correctly initialized to false and hence the li > ul is hidden. Clicking the top level li item updates the navigation object but the view does not update. I was expecting the li > ul element to get displayed.
Plunkr: https://plnkr.co/edit/UJpdFErwVUzsCd65hlW0?p=preview
Clicking on the link reloads the page and re-initializes the directive. Try modifying to:
<li ng-init="navigation.charts = false"
ng-click="$event.preventDefault(); click('charts')">
You can actually add href="javascript:void(0)"
<ul>
<li ng-click="click('charts')">
<a href="javascript:void(0)">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts {{ navigation.charts }}
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
ng-show="navigation.charts">
<li>
Charts
</li>
<li>
Graphs
</li>
</ul>
This actually happens as you put href="#" which I think refresh the page.
Related
How can I toggle a class in ng-repeat when onclick each item.My code does not work.Thank you,
This is my code.
<a class="list-group-item" ng-repeat="connect in Connected" ng-click="getChat(connect.TokenId, connect.SessionId); getOnline(connect.SupportId, connect.TokenId, connect.SessionId, connect.CreateTime); onClickTab(connect.TokenId)" ng-class="{'active': $index == selectedIndex}" ng-init="$first && getChat(connect.TokenId, connect.SessionId); $first && getOnline(connect.SupportId, connect.TokenId, connect.SessionId, connect.CreateTime)">
<h4 class="list-group-item-heading"><strong ng-bind="connect.SupportId"></strong></h4>
<ul class="list-unstyled">
<li><strong>Token ID :<strong ng-bind="connect.TokenId"></strong> </li>
<li>
<strong>Online :</strong>
<span class="Connect" ng-if="connect.SessionId != undefined" class="ConnectIcon"><div class="ConnectIcon"></div></span>
</li>
<li><span>Chat Duration: </span> <strong ng-bind="connect.CreateTime | DateGap"></strong></li>
</ul>
</a>
in my controller:
$scope.onClickTab= function(x){
$scope.selectedIndex= x;
};
You should use
onClickTab($index)
not the id.
I'm using ui-route ui-sref in my links with the navbar using UI-Bootstrap dropdowns and if I use the anchor tag with href, the dropdown closes on click, but the anchor tags with ui-sref does not close the dropdown. I've got the following plnkr with it showing the bug.
Angular Code
angular.module('app', ['ui.bootstrap', 'ui.router'])
.config(appRoute)
.controller('myController', myController);
appRoute.$inject = ['$stateProvider'];
function appRoute($stateProvider) {
$stateProvider.state('index', {
url: '/index',
template: '<h1>indexRoute</h1>'
})
.state('other', {
url: '/other',
template: '<h1>otherRoute</h1>'
})
}
function myController() {
var ctrl = this;
ctrl.title = 'Title';
ctrl.user = 'User#user.com';
ctrl.test = test;
ctrl.test2 = test2;
function test() {
console.log('TEST LINK!')
}
function test2() {
console.log('TEST 2')
}
}
HTML
<body ng-controller="myController as $ctrl" style="{padding-top: 70px;}">
<nav id="isec-menu" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="intelisecure-header">
<span>{{$ctrl.title}}</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li id="usermenu" class="dropdown user-menu-dropdown" uib-dropdown="">
<a href="" class="uib-dropdown-toggle username" uib-dropdown-toggle="">
<i class="fa fa-user fa-fw"></i>
{{$ctrl.user}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu">
<li role="menuitem">
<a href="/index" ng-click="$ctrl.test()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">index href</span>
</a>
</li>
<li role="menuitem">
<a ui-sref="other" ng-click="$ctrl.test2()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">other sref</span>
</a>
</li>
<li role="menuitem">
<a href="" ng-click="$ctrl.logout()">
<i class="fa fa-fw fa-sign-out menu-icon"></i>
<span class="menu-text">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<ui-view>
<div>
test
</div>
</ui-view>
</body>
Not perfectly built, I was trying to see if I could replicate the issue with my
https://plnkr.co/edit/Rz3AbgnYnWI34DjuByY6?p=preview
Apparently this was a known issue and was resolved by updating to UI-Router 1.0.0-beta.3
This might be a simple question to some of you.
<div class="component"
ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
ng-if="component.title == 'Heading'"
ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">
<input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
<h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>
<div ng-hide="!editing" class="textEditor">
<ul>
<li>
<a href="" ng-click="small = true">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="medium = true">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="large = true">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="xlarge = true">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
</div>
</div>
I need to add class to .component based on clicked a tag from Unordered list. I need to add class small to .component if first item is clicked, then if another item is clicked I need to remove small class and add respective class from that A tag.
Currently it adds them classes but not removing the ones that were added previously.
Basically I need to create a sort of toggle between them 4 classes
Try:
ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
I'd say use separate variable for it customClass
ng-class="customClass"
Then markup
<ul>
<li>
<a href="" ng-click="customClass = 'small'">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'medium'">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'large'">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'xlarge'">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
Hu guys,
I have a problem when I want to click on a link that is in list on html page. Here is my html:
<h3>{{snapshot.contractKey}} </h3>
<ul class="nav nav-pills nav-stacked">
<li><a id="documentLink" href="" ng-click="checkAndRedirect('/document1/')"><span translate="contractDetail.document1"> Document</span> <i class="fa fa-file-text"></i></a></li>
<li class="active"><a id="detailsLink" href="" ng-click="checkAndRedirect('/document2/')"> <span translate="contractDetail.document2"> Details</span> <i class="fa fa-list-ul"></i></a></li>
<li><a id="revisionsLink" href="" ng-click="checkAndRedirect('/document3/')"> <span translate="contractDetail.document3"> Revisions </span> <i class="fa fa-exchange"></i></a></li>
<li><a id="auditTrailLink" href="" ng-click="checkAndRedirect('/document4/')"> <span translate="contractDetail.document4"> Audit Trail</span> <i class="fa fa-tasks"></i></a></li>
<li><a id="actionHistoryLink" href="" ng-click="checkAndRedirect('/document5/')"> <span translate="contractDetail.document5">Action History </span> <i class="fa fa-clock-o"></i></a></li>
</ul>
When I want to click on a link by its ID in protractor test, error is shown No such element or Element is not visible.
Here is my test line of code:
element(by.id('documentLink')).click();
Do you know why it is bad solution and what do to?
When I do this:
element.all(by.tagName('a')).then(function(results){
expect(results.length).toEqual(5);
});
he returns me that is correct and there are 5 links on page. But when I try to access them by ID, I can not do that?
From your comment, I suggest you to use the onPrepare option in your Protractor config to maximize the browser window before your specs start running:
onPrepare: function() {
browser.driver.manage().window().maximize();
}
I have a directive that I am using to render my navigation but there are two ng-clicks in it and both of them fire twice when clicked. I have read similar questions on here but still can't work it out. Any input would be much appreciated.
The html element
<nav ng-cloak ig-nav class="navbar navbar-default" role="navigation"></nav>
The js
.controller('navCtrl',
['$scope', function($scope){
console.log('navCtrl');
$scope.usermenu = false;
$scope.toggleMenu = function() {
var nv = !$scope.usermenu;
console.log(nv);
$scope.usermenu = nv;
};
}])
.directive('igNav', function() {
return {
restrict: 'A',
templateUrl: 'partials/nav.html',
controller: 'navCtrl'
};
})
And the nav template
<ul class="nav navbar-nav navbar-right">
<li ng-if="auth.user"><!--i class="icon-plus"></i--><span class="glyphicon glyphicon-plus"></span> Add</li>
<li ng-if="auth.user"><!--i class="icon-share"></i--><span class="glyphicon glyphicon-share"></span> Share</li>
<li ng-if="auth.user" class="dropdown" ng-class="{open: usermenu}">
{{user.name}} <strong class="caret"></strong>
<ul class="dropdown-menu">
<li><!--i class="icon-align-left"></i--><span class="glyphicon glyphicon-align-left"></span> Activity</li>
<li><!--i class="icon-truck"></i--><span class="glyphicon glyphicon-paperclip"></span> Shares</li>
<li class="divider"> </li>
<li><!--i class="icon-cog"></i--><span class="glyphicon glyphicon-cog"></span> My Profile</li>
<li><!--i class="icon-signout"></i--><span class="glyphicon glyphicon-minus-sign"></span> Logout</li>
</ul>
</li>
<li ng-if="!auth.user"><!--i class="icon-signin"></i--><span class="glyphicon glyphicon-user"></span> Login</li>
</ul>
As it has worked in charliefl's plnkr there must be some other reason it is firing twice. Here is some more info I thought was irrelevant but perhaps it is after all.
The app is running firebase and angularfire 0.5.
$route has been included.
Angular is manually inialized.
ignav is included inside a base level controller (applied to the HTML tag)
Despite working in the fiddle in my app it was still firing twice.
After a bit of reorganising the simple fix was moving the ng-click from the <a> to its parent <li>
<li ng-if="auth.user" ng-click="toggleMenu()" class="dropdown" ng-class="{open: usermenu}">
{{user.name}} <strong class="caret"></strong>
<ul class="dropdown-menu">
<li><!--i class="icon-align-left"></i--><span class="glyphicon glyphicon-align-left"></span> Activity</li>
<li><!--i class="icon-truck"></i--><span class="glyphicon glyphicon-paperclip"></span> Shares</li>
<li class="divider"> </li>
<li><!--i class="icon-cog"></i--><span class="glyphicon glyphicon-cog"></span> My Profile</li>
<li><!--i class="icon-signout"></i--><span class="glyphicon glyphicon-minus-sign"></span> Logout</li>
</ul>
</li>