Clever Geek Handbook

Is it possible to exchange values ​​between controllers without ng-model in angularjs?

I am trying to use a service value between two controllers, but two way data binding is not working. Is it possible to do this without using it 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've seen use input elements with ng-model

. Maybe I should do this using observers or broadcast.

+3


source to share


3 answers


You need to store the variable visible

inside some object for it to use prototypal javascript inheritance , the scope value will update everywhere in the view without putting an observer on the variable. Let's say we created a variable with a name variables

that would have a value visible

to reflect changes on each controller. You need to add the entire service reference to the controller scope

so that the entire service variable is available in html, for example $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

+1


source


In your controller, communicate directly with the service.

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

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

Then in your opinion you can access the property

{{ ValuesStore.visible }}

Once launched, ValuesStore.Toggle()

they can automatically update.



But as @devqon said, maybe you don't want to include the whole service in your controller $watch

can help you.

In your first controller, observe visible 

$scope.visible = ValuesStore.visible;

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

In the second controller, watch out for ValuesStore.visible 

$scope.visible = ValuesStore.visible;

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


source


Try:

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

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

+2


source






More articles:


All Articles