I'm using ngHandsontable in an angular ui-router app. My table take 1-2 seconds to render (10x20 cells, which isnt create but fine ...).
The issue is that I cant use angular ng-if or ng-show to hide the table and show a loading template until the afterRender events fire because if I hide the hot-table dir like that, then the DOM is never drawn and obviously the afterRender event wont fire.
Any suggestions how to show a loading template while table is rendering? I'm thinking maybe an overlay? Is there an angular directive that will hide the DOM element but still insert/draw it?
<hot-table></hot-table>
Related
I am creating a custom angular directive to disable elements like input,anchor,button etc for a page containing kendo grids...
Directive works fine on other elements but not on kendo grids...few columns of the grid is having anchor tags need to disable them...
My question here is
How to apply custom logic present in my directive after kendo grid render completed...by emiting or broadcasting some action on databound event or etc...or by watching a rootscope value and changing it...
What would be the best approach i can take...will update the question soon with some codes...posting this from mobile...
I want to bind body click event to custom directive. I have created a custom directive for drop down. My functionality is I want closed the option list when the user clicks on the body. The html code for drop down is created by using <ul> and <li> tag. I have used the directive several times on the page. but the page now became slow as the no. of usage of directive increased on the page. So i want to know how to dynamically bind and unbind body click event inside the directive. i used $document.bind('click',function(){//function body}); syntax to bind click event. Please help. Thanks in advance
Instead of using JQuery, you can use the link method to manipulate DOM elements and add listeners
See : the AngularJS doc
I hope it may help
We're building a page with Angular, Angular-UI and UI-Bootstrap. The last one includes a directive for accordion, which simplifies a quite repetitive task of building up an accordion and an accordion group.
We, however, must watch for changes from an input inside that accordion. Problem is that the accordion has a child scope and it work work.
Here's a sample from Plunker (open the accordion by clicking on "Just a heading").
Is it possible to track changes into that input?
Try to $emit a custom event. It should bubble up to your scope. Worst case you should be able to listen to that event on the $rootScope
so something like :
$scope.$emit('input:change',{DATA});
on the accordion controller
and
$scope.$on('input:change'),function(data){
//do stuff with the change in input
})
I have the following example.
Two kendo UI buttons and two regular buttons. Both should enable/disable the button on bottom. Only the regular buttons do and I don't understand why. Probably has something to do with the scope...
EDIT:
From another example I have, it seems like the scope is updated correctly but the ui is not updated. In my example i have another control that when I click it the ui is suddenly being updated.
Found the answer:
When clicking the kendo button the scope does change but it doesn't go through angular so angular doesn't know that the scope was changed so the digest cycle doesn't run.
So adding $scope.$apply(); at the end of the function triggers the digest.
Took the explanation from here.
I have a custom directive that has to be hidden when my page loads, but later if the user clicks something it shows the directive. However, the ng-hide is placed on a parent node outside the dom node the directive lives on. This directive needs to run some code to place its components, but it has to run it when the parent dom node is shown. How can I get notified the dom has changed and the directive is now being shown so I can run my code to calculate the size?
If I don't hide the directive everything works great. However, if I hide it. It fails to render properly.
So, while ng-show or ng-hide are ok for simple DOM elements, sometimes it's better to use ng-if and basically delay the rendering until the show condition has been met. This will in most cases avoid bad renders that can happen when things are rendering in the background using ng-hide or ng-show.
ng-if was introduced in 1.1.5 and it's basically a simplified ng-switch. It was inspired by Angular-UI's ui-if.