1

Please see this Plunker. I have a myApp.common.sharedata module to share data between two modules myApp.interactive.layout.menu and myApp.interactive.layout.chart.

If you click the checkbox in the menu module, it will call service sharedata.check(key); to update the shared data.

In common/sharedata/sharedata.service.js function sharedata.check. I use sharedata.series = response.data.data; to update the data from $http, it is not working. The data is not synchronized to module myApp.interactive.layout.menu and myApp.interactive.layout.chart. I also tried sharedata.series = angular.copy(response.data.data);, it is not working too. I have to do

for(var i=0; i<response.data.data.length;i++){
    sharedata.series[i] = response.data.data[i];
}

Any suggestions? My ultimate goal is to use $http to initialize the shared data in module myApp.common.sharedata. Now I'm using the static code. If I use 

$http.get("https://reqres.in/api/users")
  .then(function(response) {
  sharedata.series = (response.data.data);
});

The data does not synchronized to module myApp.interactive.layout.menu and myApp.interactive.layout.chart too.

Tester
  • 798
  • 2
  • 12
  • 32
  • https://plnkr.co/edit/LCPWiSJkKzyxDVvKWgGT?p=preview - factory change should be updated into each controller. you need to either poke them with $emit approach or watch the `sharedata.series` on each controller so they can be updated with new value. – Hyu Kim Feb 07 '18 at 05:49

1 Answers1

1

There is a small issue which you need to fix.

Change your InteractiveChartCtrl as following.

'use strict';

angular.module('myApp.interactive.layout.chart', ['myApp.common.sharedata'])

.controller('InteractiveChartCtrl', ['$scope', 'sharedata',function($scope,sharedata) {

        $scope.menuSeries = sharedata; //MODIFIED HERE

        $scope.$watch('menuSeries', function(newValue, oldValue) {
            console.log('menuSeries changed');
            console.log(newValue);
        },true);

}]);

I have changed $scope.menuSeries = sharedata; //MODIFIED HERE

And your chart.html as following.

<div>
    <div>
            <ul>
                    <li ng-repeat="item in menuSeries.series" class="list-group-item">
                        <label class="interactive_chart_metrics">
                            <input type="checkbox" class="metrics" id="{{item.id}}" ng-click="seriesMenuClick($event,checkStatus)" ng-model='checkStatus' ng-checked ="item.selected" alt="{{item.first_name}}">&nbsp;{{item.first_name}}</label>
                    </li>
                </ul>
        </div>
    <div>
        {{menuSeries}}
    </div>

</div>

I have changed here <li ng-repeat="item in menuSeries.series" class="list-group-item">

This will fix the issue. Check the plnkr.

Updated for Menu

PSK
  • 17,547
  • 5
  • 32
  • 43
  • Thanks! But the data in `Module: Menu` does not change. Any suggestions? – Tester Feb 07 '18 at 05:59
  • Apply the same approach – PSK Feb 07 '18 at 06:01
  • Thanks! Can you explain the reason? What's the difference between `sharedata` and `sharedata.series`? – Tester Feb 07 '18 at 11:11
  • Please see this https://plnkr.co/edit/lhA1Ki?p=preview , I created a getter function `getSeries` in sharedata service. I can not get data synchronized to menu and chart modules. My question is why only use `sharedata` works? Why can't I use `sharedata.series` or the getter function? Thanks! – Tester Feb 07 '18 at 12:08
  • @Tester can you have a look to this answer, it might help you to understand this https://stackoverflow.com/a/36441020/297322 – PSK Feb 07 '18 at 12:16
  • Thank you! Now I understand `$scope.menuSeries = sharedata;` provide 2 way binding. `$scope.menuSeries = sharedata.series;` will not do that. I'm still learning AngularJS. Can you tell me how should I learn? I have tried the official tutorial and John Papa's style guide. – Tester Feb 07 '18 at 13:04