CODEWITHSUNDEEP
angularjs
BioHazard
BioHazard

Reputation: 73

How to set ng-show based on a variable from a service

I am not sure what I should put on the title, so sorry in advance if the title is confusing. Also I am not very good with AngularJS either.

Let's say I have a factory "User" that contains a boolean value "activated". I have a "message" controller that injects "User".

angular.module('message', [])
    .controller('message', function($rootScope, $scope, $http, User){

        //some functions
        ...
        $scope.message = 'Helloworld';
        console.log('In Message Controller');
        console.log('debug message, User activated: ' + User.activated);    
    })

and I want to use ng-show in message.html, for example

<div>
    <p>{{message}}</p>
</div>
<div ng-show="User.activated">
    <p>Debugging: This only shows up if activated is true</p>
</div>

But the debugging message doesn't show up.

Is there anyway i can achieve this? Or if I am not supposed to do something like this, can someone suggest me another way to get the variable from "User" factory and use it with ng-show? I want to prevent using $scope, for example

$scope.activated= function(){
    return User.activated;
}

on the controller because this way if I need to create several more controllers in the future I will have to set a $scope.activated in the controller.

Upvotes: 3

Views: 4080

Answers (2)

Stepan Kasyanenko
Stepan Kasyanenko

Reputation: 3186

Indeed, you need to use the service.

If you User.activated field should be carried out equally in all controllers, you must use a singleton.

If you User.activated method depends on the value in the controller, you must use the service instance.

Live example on jsfiddle.

    angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleOneController', function($scope, ReuseService) {
    //We need do copy, because ReuseService is singleton 
    $scope.reusable = angular.copy(ReuseService);
    $scope.singleton = ReuseService;
  })
  .controller('ExampleTwoController', function($scope, ReuseService) {
    //We need do copy, because ReuseService is singleton 
    $scope.reusable = angular.copy(ReuseService);
    $scope.singleton = ReuseService;
  })
  .service('ReuseService', function() {
    return {
      varReuse: 'im not using yet',
      imReuseFunction: function(val) {
        this.varReuse = val;
      }
    }
  });

And HTML

<div ng-app="ExampleApp">
  <div ng-controller="ExampleOneController">
    <h3>
      ExampleOneController
    </h3>
    <form name="ExampleForm">
      Reusable variable: {{reusable.varReuse}}
      <br>Reusable variable singleton: {{singleton.varReuse}}
      <br>
      <button ng-click="reusable.imReuseFunction('one')">
        Reuse me
      </button>
      <button ng-click="singleton.imReuseFunction('one')">
        Reuse me singleton
      </button>
    </form>

  </div>
  <hr>
  <div ng-controller="ExampleTwoController">
    <h3>
      ExampleTwoController
    </h3>
    <form name="ExampleForm">
      Reusable variable: {{reusable.varReuse}}
      <br>Reusable variable singleton: {{singleton.varReuse}}
      <br>
      <button ng-click="reusable.imReuseFunction('two')">
        Reuse me
      </button>
      <button ng-click="singleton.imReuseFunction('two')">
        Reuse me singleton
      </button>
    </form>

  </div>
</div>

Upvotes: 2

Louie Almeda
Louie Almeda

Reputation: 5612

You can set the is activated in the $rootScope, that way it is accessible to every controller and view like this:

In your controller:

angular.module('message', [])
.controller('message', function($rootScope, $scope, $http, User){

    //some functions
    ...
    $rootScope.user = User;
    $scope.message = 'Helloworld';
    console.log('In Message Controller');
    console.log('debug message, User activated: ' + User.activated);    
})

in your html

<div>
    <p>{{message}}</p>
</div>
<div ng-show="$root.user.activated">
    <p>Debugging: This only shows up if activated is true</p>
</div>

Upvotes: 1

Related Questions