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?
Related
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
My problem is that I have a code that works fine in angular 1.1.5 but in the newer version(1.4.3) it does not. It simply doesn't put the css classes xx-leave, xx-enter on the desired elements.
Example code in the comments(couldn't put it here)
It works jus fine in the older version but not with the new.
My question is what is that how could I make this work in the newer version of angular js?
Animations are not part of the core anymore. This means that you have to download and include the ngAnimate module into your app. (just like you do with ngResource for example).
The 'ng-animate' directive is now deprecated:
Instead, all animations are resolved from the CSS class(es) present on the element when an animation event is triggered and additional CSS classes are applied to the element to specify which animation is occurring. In other words, when a directive such as ngRepeat inserts an element into the DOM, it triggers an animation (the enter animation) and the $animate service appends the ng-enter and ng-enter-active CSS classes to the element.
These are just a couple of the changes introduced in version 1.2 of AngularJS regarding animations. You can read more in details here.
The CSS works fine always.
but the jquery code (jquery plugins or custom jquery code) does not work in the ng-view (partials)
its not about few jquery functions for which i can always rewrite jquery code using angular directives. here the major problem is, i am using a lot of jquery plugins, so the whole code contains hundreds of jquery functions, effects, transitions. so i want a practical way to make all this work inside angular ng-view using partials with minimum labor.
what changes are necessary to make such jquery code/plugins work with angular?
what is the best solution?
ps:
is backbone.js better in this respect? is it easier to use jquery plugins with backbone or same problem there also?
Have a look at
https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/
and
Correct way to integrate jQuery plugins in AngularJS
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.
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.