For example i have such code:
<div class="panel" ui-sref="product.details({id: someId})">
<div class="panel-sub-link">
some another event is here
</div>
</div>
jsfiddle
is it possible somehow not to call parent ui-sref, when i click on sub-link element? this is just an abstractive example... With more details: for example i have a panel and a slider (with navigation arrows), when i click on arrows - i do not need to change my state. How can i do this?
Using ui-sref isn't the only option to navigate between states. We still have $state.go right?
In place of ui-sref, you can simply add ng-click referring to a function in controller performing $state.go("product.details..."). And, in your panel, where you don't want to visit state on-click, you can have $event.stopPropogation.
Something like this:
<div ng-app="myApp" ng-controller="AppController">
<div class="panel" ng-click="navigate(someId)">
<div class="panel-sub-link" ng-click="$event.stopPropagation();">
some another event is here
</div>
</div>
</div>
And, navigate function in controller like this:
$scope.navigate = function(someId) {
console.log("going to product details")
$state.go("product.details", {
id: someId
})
}
That should do it!
working sample example
Related
So I've been looking around for an answer for this but I just couldn't find the answer. So what I have is a ng-repeat of items that are in a particular class="list-items". When I click on each of the item in items, it should execute a function. Within each list I have an remove button which I would like to remove the item when clicked.
So some code for reference:
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index)">X</button>
</div>
So I did right now, in my CSS, i tried using an position absolute on the button and a z-index of like 10000 to show that it is greater than, but when I click the removeItem button, it still calls the executeCallback function. I don't want it to call the executeCallback function.
Is there a way to have the removeItem function be called only when the remove button is clicked and not the parent class?
You can add multiple events in one ng-click.
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>
Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Source
You can use this, directly in the HTML template, to stop its propagation by calling $event.stopPropagation(). Just add it on the button and you should be fine:
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>
I wana toggle elements but not all elements i need just one on which is clicked.
for example if I have 3 form elements and 3 buttons if I click on button 1. I just wana toggle 1. form element.
This is my current code:
angular:
$scope.formWhat = false;
$scope.formShow = function(item){
$scope.formWhat = !$scope.formWhat;
};
html:
<div ng-repeat="x in comments">
replay
<form id="<%x.id%>" ng-show="formWhat">
blbllblblbl
</form>
</div>
This code will open all forms, but i need just on which is clicked, any idea?
One of the helpful things here is that ng-repeat creates a child scope for each item repeated.
So you can use a local variable inside that child scope that controller knows nothing about. This won't close any of the others but that could be accomplished also. Criteria you gave wasn't very specific
<div ng-repeat="x in comments">
<a ng-click="showForm = !showForm">replay</a>
<form ng-show="showForm"></form>
</div>
I'm pretty new to Ember but this one seems very strange.
I've got a div on a template looking like so:
<div {{action "selectItem" item target="controllers.items"}}> Hello there! </div>
On my controller I have a simple action callback:
WebComponent.ItemController = Ember.ArrayController.extend(Ember.Evented, {
needs: ["settings"],
actions: {
selectItem: function (item) {
//This here won't fire unless I attach it to a <button> not a <div>
},
refreshList: function () {
//blah
},
...
}
},
...
} ...
In full disclosure, I am working inside Phonegap with the emulator.
Any ideas or even directions where to take this investigation?
I figured out the problem. It seems that Ember does not translates click events to touch events automatically (Ember 1.8) for tags like divs, spans, li, etc. It seems to do so for tags like button. So the solution for this is to add an attribute to map the event to the action. Use the on attribute with your action.
<div {{action "selectItem" item on="touchEnd" target="controllers.items"}}> Hello there! </div>
Some browsers/devices will not work properly with no-standard clickable DOM elements. Consider wrapping your <div /> with a link tag <a> and add the click event to the A element.
<a {{action "selectItem" item target="controllers.items"}}><div></div></a>
Second option (which worked for me for Safari on iPad is to just set the cursor to pointer.
<div style="cursor: pointer"></div>
This answer was on the comment of Vincent Gauthier https://github.com/emberjs/ember.js/pull/11373:
<button {{action 'process'}} {{action 'process' on="touchEnd"}}>Submut</button>
This was very helpful for me because when I try to put only on="touchEnd" it stopped working on desktop browser, so the multiple actions are the key
I'm trying to toggle a variable on click of an element in the DOM and I'm getting some strange behaviour.
Full Example Here
Essentially if I put the ng-click on the .options div and leave the controller on the .options-tab div, the event triggers (but applies to everything inside the .options div). And for some reason I am forced to apply the ng-controller again.
<div ng-app ng-controller="Swipe" class="container">
<div class="options" ng-click="swiped=!swiped2">
<div ng-controller="Swipe" class="options-tab" ></div>
</div>
</div>
If I put it on the element that I want it on, it doesn't trigger the event.
<div ng-app ng-controller="Swipe" class="container">
<div class="options">
<div ng-controller="Swipe" class="options-tab" ng-click="swiped=!swiped2"></div>
</div>
</div>
You had a few issues:
Multiple controller declarations creating duplicate scopes
ng-click="swiped1=!swiped1" on both the options and options-tab elements (it was being set and then reversed immediately)
Your 2nd example was set to ng-click="swiped=!swiped2" instead of ng-click="swiped2=!swiped2"
Updated working fiddle: http://jsfiddle.net/Xya3f/2/
I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class
I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.
Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});