Is it possible to share value between controllers without ng-model in angularjs?

Question

I'm trying to share a service value between 2 controllers, but the two-way data binding isn't working. Is it possible doing that without using ng-model?

// script.js
angular.module("MyApp")
    .factory("ValuesStore", function() {

        var service = {};

        service.visible = true;
        service.toggle = toggle;

        function toggle() {
            console.log(service.visible);
            service.visible = !service.visible;
        }

        return service;
    });

function FirstController($scope, ValuesStore) {
    $scope.visible = ValuesStore.visible;

    $scope.toggle = ValuesStore.toggle;
}

function SecondController($scope, ValuesStore) {
    $scope.visible = ValuesStore.visible;
}

<!-- template -->
<div ng-controller="FirstController">
    {{ visible }}
</div>

<div ng-controller="SecondController">
    {{ visible }}
</div>

All the examples I have seen use input elements with ng-model. Maybe I should do this using watchers or broadcast.

Where are you calling `toggle`? – devqon May 29 '15 at 08:23 — devqon, May 29 '15 at 08:23
I want to click a button and change the "visible" value. – juanmorschrott May 29 '15 at 10:45 — juanmorschrott, May 29 '15 at 10:45

Rebornix · Answer 1 · 2015-05-29T08:29:20.687

In your controller, bind to service directly.

function FirstController($scope, ValuesStore) {
    $scope.ValuesStore = ValuesStore;
}

function SecondController($scope, ValuesStore) {
    $scope.ValuesStore = ValuesStore;
}

Then in your view, you can access the property by

{{ ValuesStore.visible }}

Once you trigger ValuesStore.Toggle(), they can be updated automatically.

But just like @devqon said, maybe you don't want to involve the whole service in your controller, $watch can help you out.

In your first controller, watch visible

$scope.visible = ValuesStore.visible;

$scope.$watch('visible', function (newValue, oldValue) {
    if (newValue !== oldValue) {
        ValueStore.visible = newValue;
    }
});

In your second controller, keep an eye on ValuesStore.visible

$scope.visible = ValuesStore.visible;

$scope.$watch(ValueStore.visible, function (newValue, oldValue) {
    if (newValue !== oldValue) {
        ValueStore.visible = newValue;
    }
});

I don't think you want the whole service in your view. That could be considered bad practice — devqon, May 29 '15 at 08:23
@devqon It's an easy to handle data sharing together with bindings, but you are right, sometimes we don't want the whole service. `$watch` is another option, see my update. — Rebornix, May 29 '15 at 08:30

score 2 · Answer 2 · answered May 29 '15 at 08:28

2

Try:

$scope.$watch(function(){
    return ValuesStore.visible;
}, function (newValue) {
    $scope.visible = newValue
});

Taken from this example: http://jsfiddle.net/TheSharpieOne/RA2j7/2/

answered May 29 '15 at 08:28

num8er

18,604
3
43
57

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You need to store visible variable inside some object so that it will use javascript prototypal inheritance, value of scope will update everywhere on the view without putting watcher on the variable. Lets say we create a variable called variables that would have value of visible so that it would reflect the changes on each controller. You need to add your whole service reference to controller scope so that all the service variable will available on html like $scope.ValuesStore = ValuesStore;

Markup

  <div ng-controller="FirstController">
    <div ng-click="ValuesStore.toggle()">{{ ValuesStore.variables.visible }}</div>
  </div>

  <div ng-controller="SecondController">
     <div ng-click="ValuesStore.toggle()">{{ ValuesStore.variables.visible }}</div>
  </div>

Code

var app = angular.module('plunker', []);

function FirstController($scope, ValuesStore) {
  $scope.ValuesStore = ValuesStore;
}

function SecondController($scope, ValuesStore) {
  $scope.ValuesStore = ValuesStore;
}

angular.module("plunker")
  .service("ValuesStore", function() {

    this.variables = {};

    this.variables.visible = true;

    this.toggle = function() {
      console.log(this.variables.visible);
      this.variables.visible = !this.variables.visible;
    }
  });

Demo Plunkr

@JuanMoreno could you upvote this if it does helped you? Do you like my appoach without watcher? — Pankaj Parkar, May 29 '15 at 10:59
I just now received my first 15 points., so yes, I have upvote your answer. Thanks sir :) pankajparkar — juanmorschrott, May 29 '15 at 11:30

Is it possible to share value between controllers without ng-model in angularjs?

3 Answers3