Question

我有以下布局：

<nav ng-include="'views/nav.html'"></nav>

<div class="container-fluid">
  <div ng-view></div>
</div>

内部nav.html我想显示一个下拉链接，一旦有人进入了一个页面，并且有访问权限。此页面在ng-view div

中呈现

现在我正在使用服务将共享值从一个控制器更新到导航控制器。但是，该值永远不会在导航控制器中更新。它在服务中设置，但未更新。

<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}}' <span class="glyphicon glyphicon-info-sign"></span></a></li>
      <li ng-if="login.showOption" 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>

LoginController.js

var LoginController = function (Option) {
    var model = this;
    model.showOption = Option.getValue();
    module.controller("LoginController", ['Option', LoginController]);
}(angular.module("myApp")));

Option.js

'use strict';
(function (module) {

  var option = function () {

    var value = false;

    return {
      getValue: function() {
        return value;
      },
      setValue: function(newVal) {
        value = newVal;
      }
    };

  };

  module.service("Option", option);

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

我正在另一个视图中从另一个控制器更新Option.getValue（），但是导航没有得到更新。

GameController.js

var GameController = function (Option) {
    Option.setValue(true);
    module.controller("GameController", ['Option', GameController]);
}(angular.module("myApp")));

当我调用此代码时，nav.html中的视图不会更新。我可以看到Option服务被调用，但我希望该值也会在视图中更新。

GameController LoginController Nav.html

我可以清楚地看到GameController＃watch中的Option.value：show被正确设置为true

Answer 1

可以使用angular dot rule

进行排序

只需将您的代码更新为：

选项服务

(function (module) {
    var option = function () {
//value.show instead value
        var value = {
            show: false
        };
        return {
            value: value
        };
    };
    module.service("Option", option);
}(angular.module("civApp")));

然后在你的控制器中

<强>登录

var LoginController = function (Option) {
    var model = this;
    model.showOption = Option.value;
    module.controller("LoginController", ['Option', LoginController]);
}(angular.module("myApp")));

<强> GameController

var GameController = function (Option) {
    Option.value = {
        show: true
    };
    module.controller("GameController", ['Option', GameController]);
}(angular.module("myApp")));

最后在你看来

 <li><a href="#/foo">Show option '{{login.showOption.show}}' <span class="glyphicon glyphicon-info-sign"></span></a>

AngularJS - 将值从一个视图更改为另一个视图

1 个答案: