I have a situation where I am generating a LOT of rows and columns using Angular and the performance is terrible!!
I'm assuming that it's because my ng-repeat is creating a new scope for each of the elements that it creates, however, this particular function doesn't need to watch anything. I'm simply using ng-repeat as a loop to generate HTML that will never change.
Is there another angular method that I can use to loop through model data and generate HTML without using ng-repeat that will improve performance?
You can create a directive which will accept the ng-repeat values and then do whatever you want to do in that directive e.g. create a table which will have those values.
You actually need the scope to access the data for the current iterations item.
However, as your data never changes, you might get take a look at bindonce or the slyRepeat directive.
Related
I asked this question on programmers stackexchange a few days ago and didn't receive any replies, so I thought I'd try here.
I have a table that has around 60 rows and 20 columns. Each cell has a directive with an isolated scope. I use 2 nested ng-repeats to generate the table (one for rows and one for columns), but I'm wondering how angular handles scope when a digest cycle causes a re-generation of the directives in the ng-repeats?
Does it destroy all the previous isolated scopes in my directives and create new ones, or are those old isolated scopes now orphaned somewhere and memory leaking as more and more digests take place?
Is this something that I, as a developer, should be aware of and make sure to handle the destruction of any isolated scopes?
The ng-repeat creates a $$hashKey attribute in your $scope for all the values you are displaying. Whenever the $digest is called, it checks if the values changed or not. ng-repeat is usually one of the culprits in slow angular applications for multiple reasons.
You may not need to watch the variables. If you just want to show some data which doesn't get updated often you might as well remove the double-binding so angular doesn't have to create entries for them in the $scope
Never use a function result as a ng-repeat value because the function will run on every $digest cycle
Don't use filters since they get called twice in the $digest cycle and slow down the ng-repeat
Here's some more information about ng-repeat and angular performance.
My app have multiple bootstrap tables and i want to create a global angularjs directive for sorting these tables to use this custome directive.
I have tried few but they don't help me enough what i want.
Please find plunk below for example.
http://plnkr.co/edit/BFkWWWtuZK4x6dHiEy3I
In the above example is not sorting as the scope is not updated.
So your directive isn't manipulating the outside scope. It can't do that because it doesn't have access to the variables in the parent scope because javascript is copy by value. You can manipulate what you are passed, but you can't manipulate the value of variable that was passed to you. So angularjs wants you to put objects between you and the references you are binding between so manipulations in across isolated scopes will propagate back to the caller. So if you modify your app to use that it works.
http://plnkr.co/edit/6sqQZk
Now it's a bit messy for my tastes. I'd probably move the whole table definition into the directive, and let it handle the whole thing. It would also make it easier to setup a sorting table without all of the plumbing, but that's up to you.
I'm building a complex, variable layout with infinite scroll UI in AngularJS.
Think something like Flipboard with a load of repeating data items, each item containing the same thing (title, description, image etc). Each item is pre-loaded into JSON, sorted and then organised into a series of pages, selected from a series of variable layouts. Each page has a variable number columns and each column a variable number of rows.
In order to achieve this, I'm using multiple Directives for each page layout, compiled at run time. Inside each layout Directive, I'm then building a variable number of columns, each of which contains an ng-repeat for the variable number of rows. Each row can be a different Directive, depending on how it needs to be styled. Again, all of this is happening at runtime.
I'm 99% of the way there.
The Directives are being compiled correctly and calling up the correct column Directives, which in turn are compiling the correct number of rows. Once we get to the row/item level, I'm using a Service which brings back the correct Directive for each item. The reason I choose the Service approach is that I want the items to be reused inside other modules.
The problem I'm having, is that once the page layout is compiled, it sets up the columns and then the rows but does not execute the ng-repeat. I need to get the ng-repeat to loop and also call the specific Directives I use for each item.
I think is a problem to do with $compile and what Angular knows about the DOM. Maybe I need to do a $compile or $apply at some stage to get the ng-repeat to kick in and bind the final Directives to the data items.
**
Side note: if I don't use a Service, but simply use define each layout Directive with a templateUri it works perfectly!
I can go with this approach, but ideally, I'd like to get away from downloading a bunch of templates at runtime. Also, by passing parameters into a Service, I can design more layouts, much quicker and easier than having to build individual template files.
I've set up a JS fiddle with quick example of how I'm approaching all of this:
http://jsfiddle.net/joecarney/vE3Ls/6/
Some SO required code just to post this comment:
<div ng-app="app" ng-controller="appPageController">
<div>
<div my-page></div>
</div>
</div>
If you use scope: {} in a directive it creates a new scope so your directives will not have access to controller scope unless you allow it, which you started out doing but appears you then copied and pasted the same thing for all :)
The directive compiling items in ng-repeat had no access to items. I removed scope from directives and used the attrs value to access the attributes
http://jsfiddle.net/vE3Ls/7/
I'm having some AngularJS trouble with firing off a directive when ng-repeat has completed an update. I have three named arrays, switched to via three links, allowing the selected array to be displayed by the ng-repeat. I'd like to fire some code off when it's finished as I'm planning to set some element attributes for D3 to use.
I've tried checking scope.$last in my directive, but this isn't called at the end of every ng-repeat process. If some of the data remains the same, it may not set scope.$last to true.
http://plnkr.co/edit/hwmOlI6YrgS4H1C1h7k2?p=preview
So, what's the best way to trigger code in a directive when ng-repeat has finished?
Here is a solution for you. Note that the last triggers each time now.
http://plnkr.co/edit/xV1quqzorzxliS2shrP4?p=preview
You just need to $watch the $last variable and it will work fine. This helps in situations where the scope is not created but just updated with new values. Your directive gets created once and if one of the repeated variable just changes values ng-repeat optimizes and just updates values ( as opposed to removing all the values and re-creating the new ones. ). In this scenario, the $scope.$last will be an updated variable and not something that gets "created". So, you will need to $watch it.
I'm trying to change an input box value referring to its model.
The input box is inside an ng-repeat, that gets its elements from a function and not from a variable.
Is there a way for the application to print the model full path/name so that I can refer to it from the controller? (Note that the models are working, since a division beneath it with ng-show responds properly to the input model being filled.)
In general, you shouldn't use a function inside an ngRepeat. With the way the digest cycle works, your function will end up getting called multiple times. That's not very efficient. Instead, you should run the function from your controller and assign it to a scope variable that you pass to ngRepeat.
As it turns out, this makes the solution to your problem quite easy. You could for example use each item's $index to reference it from the controller.
If you post a fiddle or plunker, I can update this answer with something more specific. But it's hard to say more without some code.