Scriptner
Scriptner

Reputation: 11

using angular factory in multiple controllers

I am using angular ui grid. At first I implemented this in a controller and it works fine after all my customization. As I am using multiple grids I cannot write a long controller each time. So, I converted it to factory. I kept the common function in factory and column definition and data in controller. Now when I use this factory in more than 1 controllers, the last controller is overriding all others. 1) Is it correct to make this grid in a factory? 2) If yes how do I overcome this problem? 3) By using factory for this grid, my gridObj.gridApi.pagination.on is throwing error(gridObj is the singleton object that I am returning).

Any suggestion is welcome. Thanks a lot in advance.

Upvotes: 0

Views: 474

Answers (1)

CMR
CMR

Reputation: 933

You should use a Directive instead. Factories create a single Instant (see Angular Provider Documentation and wont create a private scope, which you need to not override your data.

Note: All services in Angular are singletons.

But Directives provide a private scope and create new instances every time they are called in HTML if you want them to.

//directive
scope: { // this option creates isolated scopes
  something : '=',
},

I created a Plunkr showcasing a possible setup. For some more written details please see my answer from few days ago.

Your HTML might look like this afterwards

<my-grid options="all.firstOptions" class="grid"></my-grid>

Where my-grid is your directive and options="" are your special settings (and whatever else you wish to use in the directive). In your directive you declare the default settings and merge them with the special ones.

scope.gridOptions = {
          data: scope.options.data, //private scoped from options : '=',
          columnDefs: scope.options.colDef || defaultColDef, // optional setting or default setting
          // ... some more default data
        };

If you have any specific questions, let me know.

Upvotes: 0

Related Questions