AngularJS - Change value from one view to antoher

Question

I have the following layout:

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

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

Inside nav.html I want to display a dropdown link, once someone has entered a page, and has access. This page is rendered in the ng-view div

Right now I am using a service to update the shared value from one controller to the nav controller. However, the value is never updated in the nav controller. It is set in the service, but not updated.

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

I am updating the Option.getValue() from another controller in another view, however the nav isn't getting updated.

GameController.js

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

When I call this code, the view in the nav.html is not updated. I can see that the Option service is called, but I was hoping the value would have been updated in the view also.

GameController LoginController Nav.html

I can clearly see in GameController#watch that the Option.value:show is correctly set to true

sylwester sylwester · Accepted Answer · 2015-03-30T08:52:28

That can be sorted using by angular dot rule

just update your code to :

Option Service

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

and after that in your controllers

Login

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

and finally in your view

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

AngularJS - Change value from one view to antoher

1 Answers