AngularJS - Update another value inside watch

Question

I am trying to update a value in my nav.html

<nav class="navbar navbar-inverse" role="navigation" ng-controller="LoginController as login">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#/foo">Show option '{{login.showOption.show}}' <span class="glyphicon glyphicon-info-sign"></span></a></li>
      <li ng-if="login.showOption.show" dropdown>
          <a href class="dropdown-toggle" dropdown-toggle>
            Options <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a ng-href>1</a></li>
            <li><a ng-href>2</a></li>
          </ul>
      </li>

    </ul>
  </div>
</nav>

The {{login.showOption.show}} is referring to this controller

'use strict';
(function (module) {

  var LoginController = function (basicauth, currentUser, growl, loginRedirect, Option, $modal, $log) {
    var model = this;
    model.showOption = Option.value;
  };

  module.controller("LoginController", ['basicauth', 'currentUser', 'growl', 'loginRedirect', 'Option', '$modal', '$log', LoginController]);

}(angular.module("civApp")));

The Option service

'use strict';
(function (module) {

  var option = function () {
    var value = {
      show: false
    };

    return {
      value: value
    };

  };

  module.service("Option", option);

}(angular.module("civApp")));

When the value of hasAccess changes, I want the nav.html also to either show or not show

'use strict';
(function (module) {
var GameController = function ($log, $routeParams, GameService, PlayerService, currentUser, Util, Option, $filter, ngTableParams, $scope, growl, $modal) {
  var model = this;

  $scope.$watch(function () {
    return GameService.getGameById(model.gameId);
  }, function (newVal) {
    if (!newVal) {
      return;
    }
    var game = newVal;
    $scope.currentGame = game;

    var hasAccess = game.player && game.player.username === model.user.username && game.active;
    $scope.userHasAccess = hasAccess;

    Option.value = {
      show: hasAccess
    };
    //$scope.apply() <-- fails
    return game;
  });


};

  module.controller("GameController",
    ["$log", "$routeParams", "GameService", "PlayerService", "currentUser", "Util", 'Option', "$filter", "ngTableParams", "$scope", "growl", "$modal", GameController]);

}(angular.module("civApp")));

But the problem is that nothing happens. I think its because I am inside a watch, and I need to either use apply or digest, but I don't know how!

Here is link to the code

The code is here: https://github.com/cash1981/civilization-boardgame/blob/feature/options/civilization-web/app/scripts/controllers/GameController.js

https://github.com/cash1981/civilization-boardgame/blob/feature/options/civilization-web/app/scripts/controllers/LoginController.js

and

https://github.com/cash1981/civilization-boardgame/blob/feature/options/civilization-web/app/views/nav.html

Community · Accepted Answer · 2017-05-23 12:06:20Z

2

I think your service is returning false every time, you need to change your service like below.

And one more thing you are mixing up service writing pattern with factory pattern (Reference link), here the code will look like below.

Service

'use strict';
(function(module) {

    var option = function() {
        this.value = {
            show: false
        };

        this.getValue = function() {
            return this.value;
        };

        this.setShowValue = function(val) {
            this.value.show = val;
        };
    };

    module.service("Option", option);

}(angular.module("civApp")));

Controller

Option.value = {
  show: hasAccess
};

will replace by

Option.setShowValue(hasAccess);

And while get the value object you could either use Option.getValue(); or Option.value

& for show value you could do Option.value.show

Help this could help you, Thanks :-)

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Mar 30, 2015 at 17:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shervin Asgari Over a year ago

I wish this worked, but it doesn't. My nav.html still shows {{login.showOption.show}} as false even if I explicitly set Option.setShowValue(true); in my GameController.js

Shervin Asgari Over a year ago

No nothing. You got to love Angular for that :(

Pankaj Parkar Over a year ago

@ShervinAsgari you should add this line model.Option = Option;'in controller & on view like <li ng-if="login.Option.value.show" dropdown>` OR <li ng-if="login.Option.getShowValue()" dropdown>

Shervin Asgari Over a year ago

Thanks! That finally did it! I don't understand why though :)

Collectives™ on Stack Overflow

AngularJS - Update another value inside watch

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related