0

I have an AngularJS app that contains multiple sets of data, created from nested ng-repeat directives. I'd like to be able to alter the state of all of these items using a navigation bar - i.e. to change a variable to see 'this week', 'last week' etc.

The current directives I have each take a variable to filter the data to the correct time frame. However I am stuck at creating a variable that can be used by these nested items and then how to update that variable.

I know that global variables should be avoided - can anybody help in terms of how I should do this correctly?

Thanks

Jay Tyler
  • 1
  • 6
  • Could you include some code, or plunker ? – Ignacio Villaverde Nov 10 '15 at 11:35
  • Thanks for the reply Ignacio. It's quite complicated to be honest so I think that might confuse matters. Basically, I want a global variable that I can set on the click of a toolbar button that is then used within a Directive & Factory to make the call to the server. – Jay Tyler Nov 10 '15 at 11:44

1 Answers1

0

You could use $rootScope.

Here is a really simple plunker: http://plnkr.co/edit/lp47y3WgTHQBbVnV9o7U?p=preview

BTW, $rootScope is recomended for properties that are static or constant. If not, you could use events to communicate between your directives and controllers. This is done with $on, $broadcast and $emit.

Read this for a clear understanding : http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

You could also use a service that is a singleton. Take a look at this Global variables in AngularJS

Community
  • 1
  • 1
Ignacio Villaverde
  • 1,264
  • 1
  • 11
  • 15
  • Thanks. A global variable isn't going to work then. I've read through that document - I can't get any of it to work though as I don't know where/what controller I need for this. I have no idea why this is so complicated! Any other language I'd just create a variable, change it on click and then call a refresh method. This is just crazy. – Jay Tyler Nov 10 '15 at 13:51
  • With angularjs you could also do that, it is the same context. Without seeing code gets difficult to help you. Take a look at the edited answer. – Ignacio Villaverde Nov 10 '15 at 14:08
  • I appreciate that, thanks. My code is spread over multiple pages for different template directives so I don't know where to start uploading any of it - or if it will make sense to you! – Jay Tyler Nov 10 '15 at 14:17
  • So if I use $rootscope how do I set the value on click of a button. How do I get this to trigger the directive & factory to fetch new data from the server? – Jay Tyler Nov 10 '15 at 15:02
  • If you want to manage data already on yuor client is would be fine using rootScope. If you need to trigger some sort of logic for getting data from the server, then you should be using events. Again, it is difficult to explain you where to use them without any code of yours. However, in the link I have provided, It is quite clear how to use them. Here is an old answer (answered by me) where you can see a live example of event managing http://stackoverflow.com/questions/33459234/pass-value-in-between-angular-js-controller-and-services/33459279#33459279 – Ignacio Villaverde Nov 10 '15 at 15:16
  • I don't think so. I must not be being clear but I don't know how else to put it: how do I get the factory to trigger the update when the variable changes. All the examples I see just take the data and simply spit it back out onto the page (in a div with a controller assigned to it) - while this is a good gimmick for showing what Angular does, it is extremely rare that you'd do that on an actual site. What I need is to trigger an update to the factory when there is no div and no controller. – Jay Tyler Nov 11 '15 at 14:15