Controller triggered via factory

Question

I am still a novice with angular. I have asked a question similar to this before, but it seems to be a different issue at work here.

I have two controllers and a factory sharing information between them. I have two separate divs using two different controllers to show / hide using ng=show;

HTML

<div id=main>
  <div ng-controller="Ctrl1">
    <div ng-show="var1">Hidden Stuff</div>
  </div>
  <div ng-controller="Ctrl2">
    <div ng-show="var1">More Hidden Stuff</div>
  </div>
</div>

Both use the same var for ng-show, shared by a factory

JS Factory

app.factory('Srvc', function($rootScope) {
    var Srvc = {};
        Srvc.var1;
    return Srvc;
});

JS Controllers

app.controller('Ctrl1', function($scope, Srvc) {
    $scope.var1 = false;
    if (user interacts with html in div with ng-controller="Ctrl1") {
        $scope.var1 = true;
        Srve.var1 = $scope.var1;
    }
});

app.controller('Ctrl2', function($scope, Srvc) {
    $scope.var1 = Srvc.var1;
    if ($scope.var1 === true) {
        update HTML in div with ng-controller="Ctrl2" 
        although I shouldn't need to do this really should I?
    }
});

So from what I can tell the factory works ok, the data is saved in the factory Srvc.var1. However when I pass the data true to Srvc.var1 I cannot seem to get Ctrl2 to 'trigger' and update its html with ng-show=true

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

So it seems I need to $watch the service for a change within the controller.

Original answer is here.

app.controller('Ctrl2', function($scope, Srvc) {
    $scope.$watch(function () {
       return Srvc.var1;
     },                       
      function(newVal, oldVal) {
          $scope.var1 = newVal;
    }, true);
});

edited May 23 '17 at 11:57

Community

1
1

answered Sep 02 '14 at 14:31

myol

8,857
19
82
143

score 1 · Accepted Answer · answered Sep 02 '14 at 16:15

One way to solve this problem without explicitly creating a watcher, is to wrap var1 in an object inside the service and then pass this object as a $scope variable for both Ctrl1 and Ctrl2 controllers.

DEMO

Javascript

  .factory('Svc', function() {
    var service = {
      data: {}
    };

    // If you perform http requests or async procedures then set data.var1 here
    service.data.var1 = true;

    return service;
  })

  .controller('Ctrl1', function($scope, Svc) {
    $scope.data = Svc.data;
  })

  .controller('Ctrl2', function($scope, Svc) {
    $scope.data = Svc.data;
  });

HTML

<div id="main">
  <div ng-controller="Ctrl1">
    <div ng-show="data.var1">Hidden Stuff</div>
    <button type="button" ng-click="data.var1 = true">Set data.var1 to true</button>
    <button type="button" ng-click="data.var1 = false">Set data.var1 to false</button>
  </div>
  <hr>
  <div ng-controller="Ctrl2">
    <div ng-show="data.var1">More Hidden Stuff</div>
    <button type="button" ng-click="data.var1 = true">Set data.var1 to true</button>
    <button type="button" ng-click="data.var1 = false">Set data.var1 to false</button>
  </div>
</div>

score 0 · Answer 3 · answered Sep 02 '14 at 14:30

0

I think setting Var1 to $rootScope instead of Srvc should work, just call $scope.$root.$digest() after updating var1.

and use ng-show=$root.Var1 in view.

answered Sep 02 '14 at 14:30

sss

1,259
9
23

I have read that using global vars in angular can lead to unexpected consequences – myol Sep 02 '14 at 14:33
1

if you don't know what you are doing yes. because the global variable can get updated. – sss Sep 02 '14 at 14:34
"if you don't know what you are doing" - I fall straight into this category) – myol Sep 02 '14 at 14:35

Controller triggered via factory

3 Answers3