I have a parent element that fills 100% of page height and several child elements inside it. Swipe-right on the parent toggles side menu, but I want to prevent this function and trigger childAction() when I swipe-right on it's child.
<div id="parent" md-swipe-right="toggleSideMenu()">
<div id="child" md-swipe-right="childAction()">
....
</div>
</div>
The md-swipe-right like all other event directives provides $event as a local.1
In your HTML include $event as an argument to your function.
<div id="parent" md-swipe-right="toggleSideMenu()">
<div id="child" md-swipe-right="childAction($event)">
....
</div>
</div>
In your controller invoke the stopPropagation() function.
$scope.childAction = function (event) {
event.stopPropagation();
});
For more information on $event see, AngularJS Developer Guide -- expressions -- $event
Related
I have a full template
I would like to put a watch on this tempalte, in order to call a function in the controller any time something is clicked inside that template.
I know I have to use a watch (I believe I do) but I don't understand how to to the connection between the full template and the watch.
To do this just add the ng-click directive to your parent element so that every click inside that element evaluates the expression inside the ng-click attribute:
<div class="parent" ng-click="callFunction()">
<div>Hello World</div>
</div>
If you want some clicks inside the parent element to not trigger the parent ng-click you can add $event.stopPropagation() to stop event propagation:
<div class="parent" ng-click="callFunction()">
<div>Clicking here will call parent callFunction()</div>
<div ng-click="$event.stopPropagation();callAnotherFunction();">
Clicking here won´t call parent´s callFunction()
</div>
</div>
Below is my flow of application. I wanted to access the parent controller function from the child directive
<div ng-controller="ParentController">
<first-directive></fist-directive>
</div>
in First Directive another directives loading
<div ng-controller="FirstController">
<second-directive></second-directive>
</div>
from second-directive calling parent function
<div ng-controller="SecondController">
<a ng-click="ParentFunction(2342)"></a>
</div>
ParentFunction() is available in Parent Controller. I wanted to call the function from second-directive.
ParentController-->FirstDirective-->SecondDirective
How to call the parent function from SecondDirective for my scenario?
Make the first directive and second directive to inherit the parent scope(don't define scope property for them). If they are isolated scope then they can not access parent scope.
Then in the second directive do this -
<div ng-controller="SecondController">
<a ng-click="$parent.$parent.ParentFunction(2342)"></a>
</div>
EDIT:
If the directives have isolated scope as OP has commented here, then you have to pass the function to directive, so your code becomes like this
<div ng-controller="ParentController">
<first-directive function-to-call="parentFunction()"></fist-directive>
</div>
<div ng-controller="FirstController">
<second-directive function-to-call="functionToCall()"></fist-directive>
</div>
<div ng-controller="SecondController">
<a ng-click="functionToCall(2342)"></a>
</div>
And the in the directive you have to have some values to scope like this
first Directive
scope: {
functionToCall: '&'
}
Second Directive
scope: {
functionToCall: '&'
}
I am using onclick="window.open('tel:+94777122240')" in my angular ionic application. which lets the user to open dial box when onclick. i am trying to pass values to the onclick function withing ng-repeat. but the ng-repeat values doesnt pass to fucntion
i have used this method to solve it. but it does not work
<div ng-repeat="branch in branches">
<a ng-click="window.open('tel:branch.telephone')" class="button">Call Now</a>
</div>
Angular expressions are evaluated against the scope.
Try to move the ng-click function to the controller:
$scope.open = function(branch) {
window.open('tel:' + branch.telephone);
}
<div ng-repeat="branch in branches">
<a ng-click="open(branch)" class="button">Call Now</a>
</div>
Is it possible to clone an DOM element in AngularJS when clicked on it without using a custom function defined in controller/scope?
Example:
<div>
<div ng-click="create copy of this">some content</div>
</div>
becomes:
<div>
<div ng-click="create copy of this">some content</div>
<div ng-click="create copy of this">some content</div>
</div>
No. ng-click always calls functions in the scope. You could create a directive if you wanted to.
Here's my parent controller where I listen for the event
app.controller("SectionLayoutController", function($scope) {
$scope.$on("sectionLayout.doAction", function(e, options) {
// do some stuff
});
});
And in my child controller I do this
$scope.$emit("sectionLayout.doAction", { someOption: "something" });
The event should be triggered in the parent controller but it isn't. I did check what the contents of my child controller's scope was (with console.log) right before emitting the event, and the listener for the event does exist in one of its parents.
Maybe it's because the child controller's scope is not a direct child of the scope where the event is being listened on? This is not really a critical issue because I can just replace the line with
$rootScope.$broadcast("sectionLayout.doAction", { someOption: "something" });
and it works fine, but I'm still curious as to why $scope.$emit isn't working (it did work at some point, it just stopped randomly).
(Angular version 1.2.16)
EDIT
The problem seems to be a bug in angular.js, not ui-router (it has already been reported and is scheduled for a fix in version 1.3 https://github.com/angular/angular.js/issues/5489). Using ng-transclude inside a directive seems to create a sibling scope for the directive, which makes this kind of hierarchy (with my first plunker example) : http://i.imgur.com/4OUxJSP.png.
So yeah, I guess for now i'll be using $rootScope.$broadcast
Ok, so from what I've found, this is a bug with ui-router (forgot to mention I was using that, oops).
If the ui-view of a child route is inside a transcluded directive, events will get stuck there. Here's a plunkr of that bug in action http://plnkr.co/edit/zgqAPiDbB2LUtwJaeHhN?p=preview. The Dummy controller uses the sectionLayout directive and the ui-view is transcluded (as you can see in dummy.html).
<!-- dummy.html -->
<div section-layout="layout">
<!-- transcluded stuff -->
<div ui-view></div>
</div>
<!-- sectionlayout.html -->
<div>
<p>Section Layout for {{layout.title}}</p>
<p ng-repeat="r in recieves">{{r.message}}</p>
<div ng-transclude style="background-color: #EEE;"></div>
</div>
Here's another plunkr where $scope.$emit does work, and the only difference is that the ui-view is directly inside sectionlayout.html instead of transcluded in the directive http://plnkr.co/edit/mVftwkZrynkF6KanE4zV?p=preview.
<!-- dummy.html -->
<div section-layout="layout"></div>
<!-- sectionlayout.html -->
<div>
<p>Section Layout for {{layout.title}}</p>
<p ng-repeat="r in recieves">{{r.message}}</p>
<div ui-view style="background-color: #EEE;"></div>
</div>
And here's a completely different plunkr where I don't use ui-router, but it's still the same thing. A directive is used in a parent where events are listened, and the child controller is transcluded in the directive. In this one, both $scope.$emit and $rootScope.$broadcast work fine, so it seems to be a bug with transcluded ui-views in ui-router. http://plnkr.co/edit/Iz5YcbMiTzrXQ6bJMskK?p=preview
<div ng-controller="ParentController">
<p>Parent Controller</p>
<p ng-repeat="r in recieves">{{r.message}}</p>
<div my-directive>
<div ng-controller="ChildController" style="background-color: #EEE;">
<p>Child Controller</p>
<button ng-click="tryEmit()">$scope.$emit</button>
<button ng-click="tryBroadcast()">$rootScope.$broadcast</button>
</div>
</div>
</div>
I'll report this bug on their github page