Good day! However I have read on stackoverflow a lot of article but nothing found. I have a little question about ngRepeat I mean about its execution. I want to be notifeid when ngRepeat iterate has finished. How to define finish render ngRepeat and run callback? And don't propose me to use $timeout.
This question seems close to this one : Angular JS callback after ng-repeat is completed dynamically where Shohel answered to use a $broadcast on a custom directive so you can catch an event on your controller. Hope it will helped you.
Related
I am new to angularjs and trying to learn concept of filters.But in my case angularjs is calling the filter twice.I was expecting filter to run only once but its running twice. Cant understand why this is happening..
here is my plunker...
If i don't take your question wrong, this is the same question as here
Angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
To be more clear understanding, stackoverflow this question will explain in more detail by expert in angularjs
Here is another plunker same calling filter twice
The first call is from the watchers that are detecting the change. Because there is one then they need to be called again to see if is there news changes because a watcher can make changes.
I am trying to implement ng-repeat with ng-style. It works perfectly. However, I do not understand why my method is called more than the number of elements in my ng-repeat!
Do you know why?
To complete my explanation, I created a : JSFiddle
I think that when your html code is compiled, it executes ng-style directive even if there is no data (when items == null). After that your controller changes $scope.items, forcing other calls to $scope.getStyle().
I think if you put a ng-if="items != null" within ng-repeat, your function will be called only 5 times.
Solution looks fine. The reason for multiple calls is angular digest loop. You can read about it here: http://www.benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html
It works by running the loop and looking if the values changed for the watches. When they stabilize it ends. You can have multiple passes of the event loop in angular app and that is pretty normal. The limit is set afaik for 10 iterations. If bindings do not stabilize then exception is thrown.
Additional reading, highly recommended:
http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html
Part Keep Digesting While Dirty is the answer to your question i believe.
So it is by design.
I have a directive (Just a button).
This directive has an isolated scope.
I want to update the object in my parent scope by clicking on the button.
But the function is not being called.
This is the plunker.
I've tried defining the function in both the link function and the controller, and they didn't work
I know I am missing something very basic. Need some form of explanation on why this is happening. Have tried looking through a lot of the other questions but I still couldn't find a clear answer.
Thanks in advance!
You forget to scope.$apply()! See forked plunk: http://plnkr.co/edit/zo1GrfwyQ8T82TJiW16h?p=preview
You need to call $apply() every time an external source touches Angular values (in this case the "external source" is the browser event handled by on()).
This is my first attempt at Angular so please bear with me.
I have a jQuery slider that usually is initialized at document ready. However this doesn't work when the images are being populated by angular since it will not have finished rendering the DOM.
Is there a way to detect when ng-repeat finished rendering the DOM so that I can call my function?
Thanks in advance
Check out this answer Stack Overflow. Setting a timeout is never a good way to wait til something finishes. I would suggest a custom directive checking to see if you are scope.$last, then you can broadcast an event to the controller.
I've spent several hours trying minor variations of this code, and I don't understand why one works and the other doesn't.
Here's the scenario: I'm trying to present a list of registered users (which I'm getting with a simple database query that returns just a few columns), then when one user's name is clicked on, I'll retrieve more information about that user from the database, and present it in a different view. At the moment, I'm doing this with regular <a> elements with an ng-click directive that sets a value called currentid. Elsewhere in my code, I use $watch() to send out a new database query whenever currentid changes. That part seems to be working (I see the console.log() output from my watch callback, and the database query is spitting out the right data)... but sometimes currentid changes, and sometimes it doesn't, and I cannot figure out why.
A jsfiddle where it doesn't work: http://jsfiddle.net/aLcRL/11/
A jsfiddle where it DOES work: http://jsfiddle.net/aLcRL/12/
(Click on the "rmunn" and "admin" links in the table: the "Currrent ID" value below should update. And please pardon the almost total lack of CSS; I'm a coder, not a graphics designer ("Dammit, Jim!"), and it's also very late in my timezone right now so I have no motivation to pretty this up. It's functional, it demonstrates the problem, and I'm going to leave it at that.)
The only difference between these two is that one is binding to currentid, and the other is binding to vars.currentid. Now, I understand why binding to currentid wouldn't work in the case of a parent and a child scope (the child's value would overshadow the parent's value); since I'm coming from a Python background, this makes sense to me (it's similar to how Python's instance namespaces can shadow the namespaces of anything defined on the class). But in this jsfiddle, I'm only using one controller -- aren't all these variables in the same scope?
I've been beating my head against this all day, and the several Stack Overflow answers I've tried to read (like How does data binding work in AngularJS? for example) have just left me even more confused: $apply() and $digest() and scopes, oh my! So if anyone can give me a nice simple beginner's guide to scopes in Angular (or point me to an already-written one that I've missed), I'd be very grateful.
"I've learned Clojure and Haskell, I can learn a simple Javascript framework," I thought. "This'll be easy." Boy, was I wrong. :-)
You are running into an issue where ng-repeat creates a child scope.
<tr ng-repeat="user in data" blarg="{{user.id}}">
<!-- currentid here is part of the ng-repeat child scope
and not your root scope -->
<td>{{user.userName}}</td>
<td>{{user.email}}</td>
</tr>
If you need to access the parent scope you can use $parent.currentid
{{user.userName}}
You need to use $apply() whenever you modify a value outside of the angular world. For example using setTimeout() or a jQuery Plugin. Calling $apply() alerts Angular to reevaluate the scope to see if anything changed and update accordingly.