I know we can perform click events like ng-click="clickMe()" in angular.But I just gone through some examples.In that $event is passed into that like this ng-click="clickMe()" .Why we need to pass $event?What is the difference between ng-click="clickMe()" and ng-click="clickMe($event)" ?Please anyone explain.
You don't need to, and most of the time you shouldn't. From all clicks in javascript, there is an Event-object available. $event just happens to be the way to access those in javascript.
If you are interested in more about the events, try this (not really related but good to know), if you are using chrome dev-tools, check the Sources-tab and on the right side you have watches and breakpoints. There is also a drop down for "Event Listener Breakpoints". There you'll find a whole lot of possible events.
Try checking the checkbox for "Mouse" -> "click" for example, and then click somewhere on the page. The script will pause (very likely somewhere in jquery) and you can inspect the mouseevent directly under the Scope dropdown.
What I've found in angular docs
$event
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.
with this object you have various properties and functions that can help you to manage event handling.
for example:
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Related
I want to add focus and blur events to the inputs in my form. I have Added it to my custom directives and inputs, but i am using ng-tags-input as well, how can i register event listeners to that? probably modifyingtagsInputConfig, but i am not able to implement it properly .. Or should i use a different approach to add event listener to the parent form and implement event bubbling in the child elements . But i guess event capturing is supported in IE9+ , Can anyone tell me an approach which can work on IE8 as well.
Thanks
ngTagsInput supports both ngFocus and ngBlur directives:
<tags-input ng-model="tags" ng-focus="focus()" ng-blur="blur()"></tags-input>
Working Plunker
That should be better documented, I must admit it. :|
Finally, ngTagsInput only works with IE10+. If you need to support older versions of that browser, perhaps you should check out this fork.
What I mean is - I have a directive that is being duplicate on the same page. Lets say it is a grid. I have 3 grids on the same page. Now, each one of the grid is firing event called "Foo" but I want to know which of the grids really fired that event. How can I know that? Is there an id to each of the same directive child's?
If you're broadcasting a DOM event then you can use Event.targetto get the element the event was triggered from and from that you can use angular.element(Event.target).scope() to get the scope of the triggered element. If the triggered element isn't the grid itself but a child of the grid (likely) then you'll need to use jqLite or jQuery to find the grid from the target.
If you're not broadcasting a DOM event, then use your own event object that provides a target property.
I am trying to understand the $scope and how controller and view are clued together. When Angular first runs through the DOM elements, when it finds ng-controller what does it do? I know when it finds the binding variables, it creates either watch or keydown events and also for the events it injects itself and watch for the other related events. It is done by creating a scope for that given DOM element. so when an item changes in view or model it can push the value to proper places. My question is when does controller is instantiated and $scope get injected into it and how $scope calls associated methods when a event happens?
Thanks
You would have to go through the documentation on their site for clarity. From what I understand when the framework encounters the ng-controller attribute on the view, it will attach and instantiate the controller. Any code directly within the controller function will run right there. If you want code to run only on certain events like a click event then you put ng-click='myFunction()' on the element and myFunction as a $scope property. If you want to run code inside a controller on some other event then you need to use $scope.$on within the controller and $scope.$broadcast to trigger the event outside. Note that controller should only have business logic. Any code to directly manipulate DOM goes within a Directive. Use scope property in the directive to bind variables and functions between the controller and the directive.
Again, as I said, it will help to go through documentation and videos on youtube to get a better understanding on the foundations of AngularJS.
Greetings Overflowers,
If I am changing an HTML native attribute (say a division's class) inside an event handler, do I need to wrap it with a call to $apply? In other words, are these native attributes watchable?
EXAMPLE:
I am doing a custom directive inside which I am modifying the element's classes for styling on certain events like mouse enter, but no modification to the scope (or model).
I am wondering if I need to surround this logic with a call to $apply just in case there is a $watch on these element's class attribute? Are these $watches possible using angularjs? My custom directive will be used by other programmers.
Kind regards
Any thing that Angular doesn't know about should be inside an $apply if you want bindings to be updated etc...
So no, this native attributes are not watchable if you manually change the DOM and it's not part of a user event or Angular's service event (like $http)
I need to build a dialog to be used with any item on a list of items. The dialog is pretty much the same regardless of the item except for the values of the fields which are obviously item dependent.
The directive I am building is reading the template from a file, compiles it with $compile and then binds (links) it to the scope of the item. The result of the binding is a DOM tree. To make the dialog visible I need to append this tree to some element in the existing DOM. The nature of my dialog is such that it makes sense to append it directly to the body tag. The dialog will be used many times in combination with different items on the list
So here is my question: How much of this process (compile, bind, append) can be done in advance? I certainly can run compile once. I can also bind the compilation result to the $rootscope and append (hidden) it to the body tag. This way I can later just turn on visibility and show the dialog.
But if it is already bound and attached to DOM, is it kosher to re-bind it to some other scope, if so - what's the right way to do it? Another question is is it even worth it? might be just re-insert it every time it is needed?
If you're only ever going to display one dialog like that at a time and you will use it frequently, you don't have to re-bind it to another scope, just change the data on the scope. Something like this:
Create a service for your dialog
Create the directive and inject your service into it. When the linking function executes, pass something like $scope.dialogData to the service so that the service can update the data.
Create a controller that gets the service injected. Set the dialog data through the service to display the dialog. Since you're modifying data in your controller that's on the directives scope, Angular notices that and updates your dialog.
Add ng-show on your dialogs wrapper to make it simple to implement open()/close() methods on your service.
Now you have a dialog that can be used from anywhere in your system, and you're just re-using the same directive without having to mess with the DOM or compilation.
This is indeed excellent question and I'm happy to see that more and more people are starting to approach dialogs as services.
Regarding your particular questions, here are some of my thoughts:
You can "cache" linking function (that is - function that is returned from the $compile call) and then call this function as needed (passing in scope variables).
Instead of inserting (hidden) compiled element you could only attach it on demand, when a dialog gets opened. On top of this I would rather attach modal element to the $rootElement instead of <body> just not to touch DOM elements above where ng-app was defined. Just not to touch parts of the DOM that AngularJS is not controlling.
IMO dialogs are really close to AngularJS routes (as they provide different "views") and as such it would be very nice to have ability to resolve promises before modal is shown (as with routes).
In fact there are number of things to consider when designing a good, generic dialog service and I hope that those advice, alongside with excellent input provided by others, will get you started. But this all is a bit theoretical so if you are looking at the implementation of what was discussed here you can have a look at this implementation. ($dialog service from http://angular-ui.github.com/bootstrap/ - it is fully customizable so can be used with CSS other than Bootstrap's. Documentation here).
It can be seen in action in this plunk: http://plnkr.co/edit/PG0iHG?p=preview
Excellent question I think. You're wondering if one can "hot swap" the scope of an element. I don't know if there's a way to do that, or even if there is, if that's the Angular way. I take it you looked at how ng-view works to get as far as you've gotten?
My advice is to do the $compile once, keep the result, the link or transclusion function or whatever it's called in Angular parlance, around somewhere. And call it for each needed instance of the dialog.