Angular JS controller scope, multiple views

Question

For a dashboard type project (one page, multiple smaller views of different models) we are using among other tools the Angular framework.

The problem consists of the following:

I have a controller, which is responsible for retrieving workitem data. For now the workitem data consists of bugamount and backlogitems.
I have 2 functions in this controller responsible for updating the scope variables (bugAmount and backLogItems)
I have 2 html files which serve as views. These are included in out main dashboard.html (at basically a random place).

The problem I have now is that the views don't share a common ancestor which has the controller directive which links to the workItemController. I could do that and it would work perfectly, however this seriously reduces the layout possibilities.

Basically the problem: Each view now has the ng-controller attribute because they both need access to the scope. This doesn't work and only one of the views gets updated.

For reference these two divs should be able to be locatd anywhere on the page, and should have access to their shared data (which the ontroller supplies)

<div class="backLogView" ng-controller="WorkItemsController">
...
                    <tr data-ng-repeat="b in backLogItems">
                        <td class="text-left">{{b.title}}</td>
                        <td class="text-left">{{b.status}}</td>
                        <td class="text-left">{{b.assignedTo}}</td>
                    </tr>

 ...
</div>

<div class="bugAmountView" ng-controller="WorkItemsController">
...
{{BugAmount}}   
 ...
</div>

So far I've considered:

Creating a mutual parent where the ng-controller directive is used, instead of in the separate views. This is an option but will severely reduce the placement of the views (which as far as I'm concerned is a big no-no)
Using the $rootscope for the controller, for issuance update the current scope to $rootscope.workitems.. This will probably work but means that every controller can reach every other controllers data. Seems to me that can't be right either

Is there a good way to still have the linked functionality in one controller (as it should) but display the views for it's data (bugamount and backlog) in the webpage where they don't have a common ancestor.

score 0 · Accepted Answer · answered Nov 26 '13 at 18:09

You could consider using a service that can be injected into each controller. As the service would essentially be a singleton, the data contained in that service would be shared across the controllers.

You could even assign it to the local $scope for the controllers.

e.g.

var YourApp = angular.module['YourAppName'];

YourApp.factory('YourServiceName', [function(){
    return {
        var1: '',
        var2: '',
        var3: ''
}]);

So in your controllers, you can inject 'YourServiceName'. You can assign data to the properties and they would be accessible in other controllers that also have the service injected. If you add to the $scope, changes would be reflected in your view.

so, for 'WorkItemsController', you could have something like:

YourApp.controller('WorkItemsController', ['$scope', 'YourServiceName', function($scope, YourServiceName){
    $scope.ServiceData = YourServiceName;
}]);

Therefore in your views you could access ServiceData.var1 etc. and if this data is updated elsewhere via the service, it should automatically reflect in your view.

This way you would be sharing data between scopes without relying on having a shared parent or using $rootscope.

Using the service, you could even move the functionality for retrieving the original data into the service and keep it all together. Data retrieval could still be triggered by a controller, but via a method call on the service, with the service updating its own properties that are accessible in the views.

Thanks! I read about services and your explanation was the push in the back i needed. IT's still not perfect but i do have all my concerns addressed. I can load 2 separate HTML files as views, both using the same controller and they access their shared data through the service which is used as a singleton data-provider. — Edim, Nov 28 '13 at 13:04

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

I'm adding another possibility. If you want to refresh your view dynamically, the service answer won't do it. You have to use events : $emit/$broadcast so you can refresh all the views that depends of those datas.

Check Working with $scope.$emit and $scope.$on for more information.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 01 '16 at 16:17

Walfrat

5,363
1
16
35

Angular JS controller scope, multiple views

2 Answers2