ngSwitch does not update when data model change

Question

I'm new to Angular and trying to write some simple app. I have problem using ngSwitch to switch the according directive on demand as follow.

the html markups :

main html file: directiveOne:

.directive('directiveOne',function(){
      return {
      restrict:"AE",
      replace:true,
      template:"<div>this is directive one</div>",
      controller:"Dir1Controller",
      }
})
.directive('directiveTwo',function(){
      return {
      restrict:"AE",
      template:"<div>this is directive 2</div>,
      controller:"Dir2Controller"
      }
})

and a service to share data between controller.

.factory('ShareDataFct',function($rootScope){
      var srv={};

      srv.setValue=function(value){
      this.srv.var = value;
      $rootScope.$broadcast('varChanged');

      }
      return srv;
})

and finally, the 3 controllers for directives.

.controller('MainController',function($scope,ShareDataFct){
            $scope.$watch('varChanged',function(){
            $scope.myvar=ShareDataFct.var;
            })
      })
.controller('Dir1Controller',function($scope){
  //nothing to do here yet
      })
  .controller('Dir2Controller',function($scope){
  //nothing to do here yet
  })

and then I try to change the ShareDataFct var but the view (ng-switch) does not change to show the directives according to the myvar change. Please advise. Thank you.

Could you add your ng-switch ? – Okazari Jun 26 '15 at 14:52 — Okazari, Jun 26 '15 at 14:52

Okazari · Accepted Answer · 2015-06-26T15:06:27.333

0

Actually you have some several problems.

1st : You're using $rootscope.$broadcast and try to catch the result with a $watch.

You should use $scope.$on instead of watch.

2nd : You should never try to use $rootscope, $broadcast and $watch to update vars. If you try to do so, you're doing it wrong.

How to do it ? Just share the var directly from your factory.

app.factory('ShareDataFct',function(){
  var srv={};
  srv.data={};
  srv.data.value="";//init your value here
  return srv;
})

In your controller you can bind it like this :

  .controller('MainController',function($scope,ShareDataFct){
        $scope.data=ShareDataFct.data;
  })

In your view use it like this :

  <div>{{data.value}}</div>

In your ng-switch :

  <div ng-switch on="data.value">
     <div ng-switch-when="Test"> This is a test</div>
     <div ng-switch-when="TestAgain"> This is a test ... again !</div>
  </div>

Notice that it is important to share an object and not a primitive value since updating the value would erase the reference and it wouldn't update in the other part of the application.

Here is a working plunker as exemple.

Hope it helped.

EDIT : Added the plunker

edited Jun 26 '15 at 15:06

answered Jun 26 '15 at 14:59

Okazari

4,597
1
15
27

Thank you for your quickly response. But how is about if I want to change the ShareDataFct from another controller and it will automatically update on the MainController ? – user804293 Jun 26 '15 at 15:50
Yup :) ! If you use the same kind of binding $scope.data=ShareDataFct.data; in you other controllers, when you update the value in the factory it will update all the values you linked to it regardless on where you bind it (controllers, services, factories, directives etc...) – Okazari Jun 26 '15 at 15:59
Thank you verymuch Okazari. Actually, it took me a while to figure out the problem here. I use a function (setter) in the service to change the value of var in service so it does not update - don't know why. Anyway, assign value of service var within controller works for me. Thank you very much for your help. – user804293 Jun 27 '15 at 06:41
@user804293 Actually this should work with a setter too. Just a matter of tastes. The point is to reference an object containing the primitive value instead of the primitive value itself to avoid reference lost. – Okazari Jun 29 '15 at 07:42

ngSwitch does not update when data model change

1 Answers1