I have a list item which toggles modal and sets a param using ng-click
the problem is when calling a function in any other place which logs Course.SelectedCourse it's undefined although Course.ID has a value.
<li class="facebook" style="width:33%;">
<a ng-click="Course.SelectedCourse = Course.ID" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-user"></span>
</a>
</li>
Use a function in the controller, this might look like this :
In the view :
<li class="facebook" style="width:33%;" >
<a ng-click="setSelectedCourse(Course.ID)" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-user"></span>
</a>
</li>
In the controller
function setSelectedCourse(course_id){
$scope.Course.SelectedCourse = course_id;
}
In AngularJS, directives have their own scope, your list is generated with ng-repeat, isn't it ? That's why
"Course.SelectedCourse = Course.ID"
doesn't work, because inside the div ng-repeat is looping $scope.Course is created locally and isn't the same that the one in your main controller. Besides, functions from main controller can be called by directives, That's why the previous answer works.
Related
I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/
I have AngularJS (1.x) component - or actually directive to be precise,
and the elements inside this directive are get fired/worked/actioned only in the second click.
For example: a dropdown will not toggle unless you click twice.
After the second click the toggle will be on each next click.
It's like the elements are not digested in the DOM.
This is the component call:
<dropdown-custom-component-example></dropdown-custom-component-example>
This is the component html file:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
you could try to digest by your own inside your directive, after you've checked if $digest isn't alreay in progress:
if(!$scope.$$phase) $scope.$digest();
// or $apply ..
hope this solves your issue :)
Most of the time AngularJS does not respond is because something is happening outside the Angular context, in those cases it's useful to try to replicate the functionality you want with built-in AngularJS directives.
It would be useful to have access to some of the implementation of your component. However, with all the information you have provided, you can use the ngClick built-in directive:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier" ng-click="yourFunctionHere(this)">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
AngularJS Docs - ngClick
Here is the code:
<div ng-click="grid.appScope.navToPage(row)"class="ui-grid-cell" ui-grid-cell style="cursor: pointer">
<div class="ui-grid-cell-contents">
<a ng-href="/mywebpage/2" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
</a>
</div>'
</div>
I want to figure out some way to be able to click the a tag link without clicking the div with the ng-click. Is there a good way to do this?
You can prevent click propagation using the $event.stopPropagation() which is available on many angular directives such as ng-click. Please have a look at this question AngularJS ng-click stopPropagation
In your case, the anchor tag should look like this:
<a ng-href="/mywebpage/2" ng-click="$event.stopPropagation()" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
</a>
Try this
<a ng-href="/mywebpage/2" target="_blank" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-new-window"></span></a>
My service returns some data and i use it into my View.
I'm trying to pass a specific ID into my onDivClick method on a click event.
I want to do something like that but it's not working :
<div *ngFor="let d of data" class="widget-body no-padding">
<a class="list-group-item" href="#" (click)="onDivClick({{d.data_id}})">
...
</a>
</div>
Any ideas ?
Just remove {{}}
<a class="list-group-item" href="#" (click)="onDivClick(d.data_id)">
If you have () or [] you must not use {{}} as well
I am running E2E on my angular application using Protractor. I am running into a very weird problem.
I am using the Bootstrap Dropdown which has some options. I need to click on one of the options.
I referred this answer which tries to do something similar, but doesn't work for me:
Protractor - how to select heavily nested dropdown element?
My structure looks like:
<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown">
<button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu filetree-dropdown" role="menu">
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()">
New File
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()">
New Folder
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()">
Copy
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled">
Paste
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()">
Rename
</a>
</li>
</ul>
</div>
In my test, I am trying to click on the Rename link.
The code I have written is:
element(by.css('.dropdown-toggle')).click().then(function(){
//click on rename
});
On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.
As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?
Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();