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

score 2 · Accepted Answer · edited May 23 '17 at 12:06

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 '17 at 12:06

Community

1
1

answered Mar 30 '15 at 17:37

Pankaj Parkar

134,766
23
234
299

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 Mar 30 '15 at 17:42
No nothing. You got to love Angular for that :( – Shervin Asgari Mar 30 '15 at 17:55
@ShervinAsgari you should add this line `model.Option = Option;'in controller & on view like `
` OR `
`

Pankaj Parkar

Mar 30 '15 at 18:17

Thanks! That finally did it! I don't understand why though :) – Shervin Asgari Mar 30 '15 at 18:43

AngularJS - Update another value inside watch

1 Answers1