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();
}
Related
I want to call controller method by using #Url.Action in href,
how can we do the same?
<ul id="dvMenuInner" class="nav navbar-nav dropdown">
<li ng-repeat="parent in menu">
<a href="#")}" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true">
</span>{{parent.menuname}}
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" ng-repeat="child in parent.children">
{{child.menuname}}
<ul class="dropdown-menu">
<li ng-repeat="children in child.childrencc"><a ng-repeat="child in parent.children" href="#Url.Action({{children.actionname}},{{children.url}})">{{children.menuname}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Since URL.Action is Razor code and it will execute at server so you can not pass your client side data to it.
either you can do it as follows
<a href="#Url.Content("{{parent.menuname}}"+"/"+"{{parent.actionname}}")">
which will construct the URL controller and action name or you can do it via plain Html way
<a href="{{parent.menuname}}/{{parent.actionname}}">
by any of the above way you can redirect your link to the desired controller+action
I have a menu of nageção that works perfectly the class when clicking the option corespondente. Inside this page that opens when clicking on the menu there is a button that leads to another page, after clicking the menu loses the active class. How do I indicate that I'm still in that session.
First page working .. but clicking the button ..
the menu does not remain active
HTML
<li ng-class="{active: 'home.produtos'}">
<a href="">
<i class="fa fa-fa-briefcase"></i>
<span class="nav-label">Produtos</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse" ng-class="{in: $state.includes('home.produtos','home.etiquetas','home.etiquetasview')}">
<li>
<a ui-sref="home.produtos">Produto</a>
</li>
<li ui-sref-active-eq="active">
<a ui-sref="home.etiquetas">Etiqueta</a>
</li>
</ul>
</li>
Button in page
<a ui-sref-active-eq="active" ui-sref="home.etiquetasview({id:{{item.codigo}}})" class="btn btn-white btn-sm">
<i class="fa fa-eye"></i> View
</a>
<a ui-sref-active="active" ui-sref="home.etiquetasview({id:{{item.codigo}}})" class="btn btn-white btn-sm">
<i class="fa fa-eye"></i> View
</a>
May be this Can Help You Angular-ui-router: ui-sref-active and nested states
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.
<li>
<a href="javascript:;">
<i class="fa fa-file-excel-o" ng-click="export()"></i> Export to Excel </a>
</li>
Here is the click function, but it is not working properly.
<li>
<a href="javascript:;">
<i class="fa fa-file-excel-o" ng-click="export()"></i> Export to Excel </a>
</li>
I think your anchor tag is doing the trick.
use href="javascript:void(0)" else don't use href
If it is not working, then use div or span, instead of anchor tag
Put ng-click on whole li item:
<li ng-click="export()">
<a href="javascript:;">
<i class="fa fa-file-excel-o"></i> Export to Excel
</a>
You are not obviously not clicking on the element.
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>