I'm using Angular UI Router and I have a very simple:
<a href='#' ng-click="toggleCollapse()">
<i class="icon icon-triangle-down" ng-class="{'icon-triangle-down': !isCollapsed,
'icon-triangle-right': isCollapsed}"></i>
</a>
My function looks like:
$scope.toggleCollapse = ->
alert 'here'
console.log $scope.isCollapsed
$scope.isCollapsed = !$scope.isCollapsed
However, for some reason, my
$rootScope.$on '$stateChangeStart', (event, next, nextParams) ->
console.log event
gets triggered when I click the link. Is there any way to prevent it from triggering the $stateChangeStart?
this is because you have href='#' tag.
<a ng-click="toggleCollapse()">
<i class="icon icon-triangle-down" ng-class="{'icon-triangle-down': !isCollapsed,
'icon-triangle-right': isCollapsed}"></i>
</a>
remove href that and it wont trigger route change
Related
Both functions are triggered while I click on the inner a tag, how can I restrict this. I need to trigger onDelete() function only when is clicked
<div ng-click="ctrl.onEdit()">
{{content}}
<a href="" ng-click="ctrl.onDelete()" > Delete Me !</a>
</div>
Pass the $event in ctrl.onDelete($event) and then stop propagating it in the on delete function, you need this because events bubble towards parent elements
this.onDelete = function (event){
event.stopPropagation();
}
or simply write this after you ondelete function in html
ng-click="ctrl.onDelete(); $event.stopPropagation();"
You can achive that by passing $event and use stopPropagation:
<div ng-click="onEdit($event)" style="background-color:red;">
{{content}}
<a href="" ng-click="onDelete($event)" > Delete Me !</a>
</div>
JS
$scope.onEdit = function(event){
console.log("onEdit");
event.stopPropagation();
}
$scope.onDelete = function(){
console.log("onDelete");
event.stopPropagation();
}
Demo Plunkr
However its not good practice to use nested ng-click. Its hard to maintain and can lead to unexpected behaviour.
<div ng-click="ctrl.onEdit()">
{{content}}
</div>
<div>
<a href="" ng-click="ctrl.onDelete()" > Delete Me !</a>
</div>
I think it will work like this
It's called event bubbling. You can propagate the the event and cancel it like this
function onDelete($event){
if($event){
if ($event.stopPropagation) $event.stopPropagation();
if ($event.preventDefault) $event.preventDefault();
}
}
HTML
<div ng-click="ctrl.onEdit()">
{{content}}
<a href="" ng-click="ctrl.onDelete($event)" > Delete Me !</a>
</div>
I have following code:
<ul class="dropdown-menu">
<li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
<li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
</ul>
I am switching classes if the value is selected. I would like to add an event on icon (which is only visible when its is selected), however, whenever I click on the icon, two ng-click's are triggered. My question is: how can I disable the ng-click on the parent element, when the row is selected?
You need to add $event.stopPropagation() to your inner ng-click:
<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>
This will prevent the ng-click on the parent element from being called.
When you write and event in a DOM element, it's invocation bubbles up to call event attached to all it's parent till HTML tags.
You can prevent this occurrence by preventing the event to propagate further. stopPropagation does exactly that. You can find, details here https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
In your, unselect function, you can call like this
function unselect(event) {
event.stopPropagation();
// Your original code
}
I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.