Store value in a directive for later use

Question

I would like to save an object in a ngRepeat so that I can use that object in its children, like shown in this code:

<div ng-repeat="bar in foo.bar> 
    <div ng-repeat="qux in baz.qux" myvalue="{'item1':foo.var1, 'item2':qux.var2}">
        <div ng-click="myFirstFunction(myvalue)"></div>
        <div ng-click="mySecondFunction(myvalue)"></div>
    </div 
</div

The object I want to generate and then use is rather large and I'd rather not define it repeatedly for each ngClick directive.

I considered saving it into a scope variable but the object will change for each iteration of the ngRepeat.

Is there a directive or an other way that I can use to store this value for later use?

User services to persist data. Check this question http://stackoverflow.com/q/16709421/1182982 — Yasser Shaikh, Jun 18 '15 at 13:51

Blackhole · Accepted Answer · 2015-06-18T14:15:45.730

1

To avoid the repetition of what is probably a long variable definition, you can use the ngInit directive, whose content will be executed each time a corresponding element is created.

<div ng-repeat="bar in foo.bar> 
    <div
        ng-repeat="qux in baz.qux"
        ng-init="myValue = {'item1':foo.var1, 'item2':qux.var2 }"
    >
        <div ng-click="myFirstFunction(myValue)"></div>
        <div ng-click="mySecondFunction(myValue)"></div>
    </div>
</div>

However, a complex code in a template is rarely a good idea. Contemplate moving your logic inside a controller, as advised by the documentation:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

edited Jun 18 '15 at 14:15

answered Jun 18 '15 at 14:03

Blackhole

20,129
7
70
68

Moving to a controller was the first thing I attempted, however, myValue will change in each iteration of ng-repeat. In a asp.net repeater object, saving variables per iteration isnt straight forward and I assumed ng-repeat would behave similier. I am open to methods to move this to the controller if you have any idea. – MichaelTaylor3D Jun 18 '15 at 14:08
I guess that create a controller specifically for the most nested `
`, and initialise your value in it, is an unnecessary overhead, isn't it?
– Blackhole Jun 18 '15 at 14:14

Chris Charles · Answer 2 · 2015-06-18T14:00:45.757

0

You can just do the naive thing here and it'll work:

<div ng-repeat="bar in foo.bar> 
    <div ng-repeat="qux in baz.qux">
        <div ng-click="myFirstFunction(foo, quz)"></div>
        <div ng-click="mySecondFunction(foo, quz)"></div>
    </div>
</div>

Angular will know the scope of the repeat when you click.

edited Jun 18 '15 at 14:00

answered Jun 18 '15 at 13:51

Chris Charles

4,406
17
31

thats what Im trying to avoid because Im passing like 8 variables several nested ng-repeats, and there are about 7 ng-clicks within each iteration. Passing this many variables for every ng-click makes it look very messy and violates DRY. This is my fallback, but Im hoping there is a better way. – MichaelTaylor3D Jun 18 '15 at 13:54
I see, I understand now. Let me think about that. – Chris Charles Jun 18 '15 at 13:57
@MichaelTaylor3D, can you just pass foo and quz (ie only two params). I assume you don't have too deep a nest of loops? – Chris Charles Jun 18 '15 at 13:59
I have a total of 8 nested loops generating every permutation 8 of arrays. – MichaelTaylor3D Jun 18 '15 at 14:01

score -1 · Answer 3 · answered Jun 18 '15 at 13:54

-1

You could store it in local storage using ng-storage. https://github.com/gsklee/ngStorage

This would allow you to store it, then use it anywhere in the application.

answered Jun 18 '15 at 13:54

OrganizedChaos

431
2
11

My understanding is that ng-repeat pre-renders in a single pass so saving it outside of the directive will only push the last value generated. At least thats what happens in a asp.net repeater object. Otherwise I would just save the variable to the scope. – MichaelTaylor3D Jun 18 '15 at 13:58

score -1 · Answer 4 · answered Jun 18 '15 at 13:57

-1

cookies, you also have ng-cookies https://docs.angularjs.org/api/ngCookies

try this out! or cookieStorage

answered Jun 18 '15 at 13:57

AlCode

565
1
8
23

Store value in a directive for later use

4 Answers4