I'm trying to make some animations with the components. I use Angular and Masonry (UI library). When I try to animate an element that is outside the ng-view it work's but when I try this on element inside the ng-view it doesn't work. I know that is due to jQuery - it runs the code once (when the page is loaded, but jQuery doesn't wait the ng-view element). How I can fix this problem?
You need to make your animation with directives on "Angular territory".
Check angular-masonry
Related
I am a beginner in angularJS, and do not write good English.
I have the following code
<span class="custom-marker-price" ng-bind="property.rentValue"></span>
How can I hide the element span (IMG1) when load angular...
Well, if im correct you should use ng-hide property.
Inside of span after class add ng-hide='hideIt'
and inside of controller at first line put:
$scope.hideIt=false;
And when you want to hide it just put boolean variable in true:
$scope.hideIt = true;
You could also use ngif property.
Hope this help!
ngCloak
directive in module ng
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
— AngularJS ng-cloak Directive API Reference
I'm trying to use a ui kit (http://demos.creative-tim.com/material-kit/components-documentation.html#checkbox-row) and it's have several js files, jquery, bootstrap, its own etc. I included them in the index.html and works well if the checkbox or other visual element is on the page at start.
But when i hide a div under ngIf with the checkboxes, and a button toggle shows this div later, it's visual element what the js files adds to it, doesn't do they job and i don't see the fancy checkboxes.
As i think, the external libs right part should be initialized when the hidden div comes visible.
How could i overcome with this issue? (i am using angular 4 with server side rendering)
when i hide a div under ngIf
The *ngIf directive does not hide the div, it removes or adds it to the DOM which is probably why you're having initialization issues. Try binding to [hidden] instead.
i'm trying to use some animations using ngAnimate. In my view i use some ngClass/ngShow etc.. and with ngAnimate can't "live together". ngAnimate breaks the other animations. So, according to the official guide of angular, i tried to disable globally the animations in this way in my controller:
$animate.enabled(false);
but some components that i use needs of ngAnimate! So i tried to set the animations for certain elements from the controller in this way:
$animate.enabled(true, "#my-element-id");
but it's not working. Am i wrong?
In an angular js 1.2.22 version code, I saw this in the HTML
<div class="mainContent" ng-include="content"> </div>
and in its corresponding controller, I see this.
$scope.content = 'templates/contents/home.html';
I see its making an Ajax call to load the template.
I am working on improving the speed of the content display and I did some optimizations like minifying the javascript code and minifying css
My doubt is how to make this inline - without making the Ajax call. So, that I could check if there is visible difference in speed of the content showing up for this template?
I tried the gulp-angular-templatecache to cache templates but, it did not work.
Is there any workaround for this so that I can make this template inline ?
What you're looking for is Angular's $templateCache.
Depending on your task runner, you might want to give gulp-angular-templatecache or grunt-angular-templatecache a try.
My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.