I'm sorry, I have Googled, looked through the Infragistics website and it's GitHub section, but I surrender.
How do you implement an "On row select" event, when using the IgniteUI library with AngularJS ?
Even the IgniteUI-AngularJS GitHub page, which contains a demo, doesn't show how to do this.
Here's the jQuery method of doing it (from this webpage)
$("#grid").on("iggridselectionactiverowchanged", function (evt, ui) {
var message = "iggridselectionactiverowchanged";
apiViewer.log(message);
});
...but I want to know how to capture this event from my AngularJS controller (and keeping the amount of jQuery to a minimum).
Is it possible ?
I also tried the standard way of adding a ng-model attribute to this control, and trying to put a watch on this variable, but even ng-model seems to be ignored by this control.
Has anyone used this control, successfully, using AngularJS ?
First I would like to provide some background info about Ignite UI. Ignite UI is built on top of jQuery and jQuery UI. The Angular directives for Ignite UI provide developers with a way to declaratively initialize controls and with out-of-the-box support for two-way databinding. Still the product is not native to Angular and thus not everything that it exposes as functionality can be consumed as you would with native Angular components. That doesn't mean that you lose functionality, just some of it has to be utilized through jQuery.
To answer the specific question, you can bind event handlers declaratively as described in the documentation.
Related
Is it possible to compile AngularJS application to remove ng-* directives like (ng-click) and generate plain HTML like Angular 2+? If we inspect Angular 2 application with say chrome dev tools, it does not show event handlers like onClick. However AngularJS shows ng-click, ng-for etc.
Short answer:
No.
Long answer:
I won't prvide one, as your question touches many (complex) topics that are already explained elsewhere and possibliy better than I could do, but I will provide some usefull links in my short explanation.
Medium answer:
What you asking for is not possible, because AngularJS uses a different approach for change detection and event bindings.
One of the cool things about AngularJS/Angular is it's ability to to detect changes and perform updates automtically. To make this possible, Angular(JS) has to notice if things change.
Taking your example with the click event, AngularJS uses event based directives to notice the click event, whereas Angular performs a event binding using one-way bindng from the template view to the component. Angular has this possibility because it uses Zones to get aware of changes. Therefore it doesn't need a directive as AngularJS did.
This explains why you don't see event handlers on the HTML element, because Angular directly sets up the event binding. You can verify that the event is handled by Zone.js if you check the Event Listeners tab in Chrome:
Other usefull links to the topic:
https://angular.io/guide/architecture-components#data-binding
https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
Just learning , new to this site.
Is it possible to have ExtJs and AngularJS together in same application ?
or is it worth to have both of them in same application ?
Thanks
Sometimes people use ExtJs components in an AngularJS app.
AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.
I'm working on an application where different widgets from different plugins would be loaded into a host, and they don't know of each other. So I want to use EDP and in one widget raise an event (for example, UserDeleted) and in another widget, subscribe to that event (the famous publisher/subscriber, or let's get more specific, observer pattern).
In jQuery I use trigger() and bind() methods to accomplish this. However, I'm not able to find anything equivalent in Ext JS. Am I missing something? Or is there any other pattern to create loosely coupled UI widgets in Ext JS?
If your widgets don't know about each other, you need to use the mediator pattern.
And it seems that Ext.util.Observable is what you're looking for.
Since ExtJS 4.x Sencha introduced the concept of Controllers which listen for events in a clean systematic pattern of an MVC application. In this scheme your components would fire events (built in or custom ) and controllers will respond to those events.
To fire a custom event you can use fireEvent method on the Observable class which is inherited by just about all other ExtJS classes.