Can it be right, that angular ng-repeat animations, do not trigger inside views?
I've extended some examples from this article: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
When the view change, the repeat animation is not fired. I'm expecting the repeat ng-enter to fire when the view loads — it's the 1-10 list, which should animate in from the left.
http://plnkr.co/edit/8e9RqoaKnJZf5QovoBrU?p=preview
But in this example (just copy/pasted to the view on the above link) it does:
http://plnkr.co/edit/HytaDZ0nXbGLmks9eLUx?p=preview
Related
In below example it has two buttons "Add" and "ClearAll".
`http://jsfiddle.net/naveencgr/L3orucjm/3/`
"Add" button is inside the template which is loaded by backbone on view render and Clear All button is loaded normally as in html.
I had events for both the buttons in view, but click event on normally loaded button is not working . Why?
i have seen this question asked in backbone github forum. I thibk it is designed this way. each backbone view events only involved with items inside the view.
in order to use the outside event you either put thie inner view into theoutter view or simple use jquery event for it. basically backbone authors believe this is more elegant and secure and this will not be changed at least for now.
I had an app that I got 80% through building a few weeks back and it uses a lot of jQuery to do animations. I stopped working on that and started rebuilding it from scratch using AngularJS.
I'm now at the point where I'd like to try to add some of the animations that I WAS using in the old app. When leaving from the "main page" to the "details page", I used to have one div go flying offscreen to the left, while the main table seemed to shrink upwards and sort of "merge with" a drop-down box that was coming into view for that new details page. (The table and the drop-down have essentially the same information, which is why the animation made sense. The drop-down allows them to jump from record to record, without having to go back to the main table to navigate.)
Anyways, the way I built this app in Angular is that it is working off of one index file with a single "ng-view" div in it. And then the router determines what template-page to pull in.
I see from the various tutorials out there on animating with AngularJS 1.2 that the "ng-view" fires off events that can be harnessed for animation. But that's ONLY if you're going to add your .css class to be animated to the div that holds the "ng-view".
<div class='whatever' ng-view>
and then your css would contain something like:
.whatever.ng-enter{
opacity: 0;
}
But what can I do if I want to animate the way various PIECES of a view template enter or leave the view? (Most are just divs that act as containers for small tables of data [ as divs, not tables].) I'm using "ng-repeat" in those templates to populate the tables, but I really don't want to animate any of the rows. That's about the only other directive that fires Angular's animation that I'm currently using in the templates.
You can set animations to different parts of your template in it's controller using Jquery itself.
myApp.controller('sampleController', function($scope, $timeout, $location){
$("#submit_button").click(function(){
$("#yourdiv").fadeOut();
$timeout(function() { $location.path('/newurl'); }, 3000);
});
});
Display all your animations then change the route. I have used $timeout so as to set a delay for displaying the animations.
I have a List view and a Detail view.
In list view, I have set up the jquery infinite-scroll plugin.
When a user clicks an item, I render the detail view. The problem is when the user hits bottom of the page, the infinite-scroll callback is fired.
I tried calling $.infinitescroll('pause') but it won't stop the fetch.
Should I completetly destroy the list view before rendering the detail view?
If so, how can I completely destory it? (I tried https://stackoverflow.com/a/11534056/433570 but didn't stop the infinite-scroll callback)
My code resembles https://github.com/joshbohde/django-backbone-example in a big picture
Have you tried doing event.stopPropagation on the scroll event inside the Detail view?
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 am creating a grid of checkboxes to enable a user to select different events and age classes for an athletics meeting. The events are the columns, the classes are the rows.
Here's the plunk: http://plnkr.co/edit/j6gRR18qXCDNCMQ9VDNG?p=preview
I first created this with an nested ng-repeat. It works, but is very slow to load which is apparently due to the creation of data bindings and watches. To speed things up, I wrote a directive to do the nested looping and the building of the html.
The checkboxes are bound to a two dimensional array - classevent[][].
The problem is that I cannot get the bindings to work with the directive.
Here are the steps to see the problem in Plunker:
When it finally loads, open the console and then scroll down the grid to the bottom - column 201, row 32. Click save and you get false in the console. Check the box 201,32 and click save again. It's true. So the data binding is working.
Now go to the html and comment out the tbody.../tbody and uncomment the tbody classeventgrid.../tbody directive as described in the code.
It loads much faster, but if you do the same as before, you will see that the bindings are broken.
Can anyone tell me what I have done wrong?