AngularJS - 更新手表内的另一个值

Question

我正在尝试更新我的 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>

{{login.showOption.show}} 指的是这个控制器

'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")));

Option 服务

'use strict';
(function (module) {

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

    return {
      value: value
    };

  };

  module.service("Option", option);

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

当 hasAccess 的值发生变化时，我希望 nav.html 也显示或不显示

'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")));

但问题是什么都没有发生。我想是因为我在手表里面，我需要使用 apply 或 digest，但我不知道怎么做！

这里是代码链接

代码在这里： 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

和

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

Answer 1

我认为您的服务每次都返回 false，您需要如下更改您的服务。

还有一件事，您将服务编写模式与工厂模式 (Reference link) 混为一谈，这里的代码如下所示。

服务

'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")));

控制器

Option.value = {
  show: hasAccess
};

将替换为

Option.setShowValue(hasAccess);

在获取值对象时，您可以使用Option.getValue(); 或Option.value

& 对于show 值，您可以使用Option.value.show

帮助这可以帮助你，谢谢:-)