AngularJS: Implementing bidirectional data binding between two separate controllers using a common service

Question

AngularJS: Implementing bidirectional data binding between two separate controllers using a common service

I'm currently working on establishing a two-way data binding connection between two separate controllers and a shared service in AngularJS:

app.factory("sharedScope", function($rootScope) {
    var scope = $rootScope.$new(true);
    scope.data = "initial text from factory";
    return scope;
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});

app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;
});

Fiddle: http://jsfiddle.net/akashivskyy/MLuJA/

Upon launching the application, data1 and data2 are successfully set to the initial text from factory, but any subsequent changes made to either of them do not reflect across all three scopes.

How can I establish this binding?

P.S. If there's a more efficient approach than returning a scope while still retaining access to event and observation functionalities (without essentially redefining them), please advise. :)

javascript angularjs angularjs-scope angularjs-controller

Answer 1

Answer №1

Resolved the issue. If you are using primitives in your fiddle, be aware that references may be lost.

Take a look at this:

Updated fiddle

app.factory("sharedScope", function($rootScope) {
    var scope = $rootScope.$new(true);
    scope.data = {text: "init text from factory"};
    return scope;
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});

app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;
});

Answer 2

Resolved the issue. If you are using primitives in your fiddle, be aware that references may be lost.

Take a look at this:

Updated fiddle

app.factory("sharedScope", function($rootScope) {
    var scope = $rootScope.$new(true);
    scope.data = {text: "init text from factory"};
    return scope;
});

app.controller("first", function($scope, sharedScope) {
    $scope.data1 = sharedScope.data;
});

app.controller("second", function($scope, sharedScope) {
    $scope.data2 = sharedScope.data;
});

Answer 3

Answer №2

Here's a creative twist: No need to inject $scope or $rootScope in this scenario. This code snippet functions perfectly when using Controller As. Take a look at the Fiddle

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

app.factory("sharedScope", function() {
    var _this = this;
    _this.data = {text: "init text from factory"};
    return _this;
});

app.controller("first", function(sharedScope) {
    var _this = this;
    _this.data1 = sharedScope.data;
});

app.controller("second", function(sharedScope) {
    var _this = this;
    _this.data2 = sharedScope.data;
});

If you want even more excitement, consider treating controllers, services, and factories as classes. More Fiddles

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

var SharedScope = function(){
    var _this = this;
    _this.data = {text: "init text from factory"};
    return _this;
};

app.factory("sharedScope", SharedScope);

var First = function(sharedScope){
    var _this = this;
    _this.data1 = sharedScope.data;
};

var Second = function(sharedScope){
    var _this = this;
    _this.data2 = sharedScope.data;
};

First.$inject = ['sharedScope'];
Second.$inject = ['sharedScope'];

app.controller("first", First);              
app.controller("second", Second);

I've been experimenting with the implementation of Josh Carroll's Guidelines to Avoid "Scope Soup"

Answer 4

Here's a creative twist: No need to inject $scope or $rootScope in this scenario. This code snippet functions perfectly when using Controller As. Take a look at the Fiddle

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

app.factory("sharedScope", function() {
    var _this = this;
    _this.data = {text: "init text from factory"};
    return _this;
});

app.controller("first", function(sharedScope) {
    var _this = this;
    _this.data1 = sharedScope.data;
});

app.controller("second", function(sharedScope) {
    var _this = this;
    _this.data2 = sharedScope.data;
});

If you want even more excitement, consider treating controllers, services, and factories as classes. More Fiddles

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

var SharedScope = function(){
    var _this = this;
    _this.data = {text: "init text from factory"};
    return _this;
};

app.factory("sharedScope", SharedScope);

var First = function(sharedScope){
    var _this = this;
    _this.data1 = sharedScope.data;
};

var Second = function(sharedScope){
    var _this = this;
    _this.data2 = sharedScope.data;
};

First.$inject = ['sharedScope'];
Second.$inject = ['sharedScope'];

app.controller("first", First);              
app.controller("second", Second);

I've been experimenting with the implementation of Josh Carroll's Guidelines to Avoid "Scope Soup"

Answer 5

Answer №3

When working with JavaScript, objects are passed by reference, meaning that all scopes will refer to the same object. To make use of this behavior, consider implementing the following setup:

app.factory("sharedData", function() {
    return {data: "initial text from factory"};
});

app.controller("first", function($scope, sharedData) {
    $scope.sharedData = sharedData;
});

app.controller("second", function($scope, sharedData) {
    $scope.sharedData = sharedData;
});

In your view, access the shared data like so:

<p>{{sharedData.data}}</p>

Answer 6

When working with JavaScript, objects are passed by reference, meaning that all scopes will refer to the same object. To make use of this behavior, consider implementing the following setup:

app.factory("sharedData", function() {
    return {data: "initial text from factory"};
});

app.controller("first", function($scope, sharedData) {
    $scope.sharedData = sharedData;
});

app.controller("second", function($scope, sharedData) {
    $scope.sharedData = sharedData;
});

In your view, access the shared data like so:

<p>{{sharedData.data}}</p>

AngularJS: Implementing bidirectional data binding between two separate controllers using a common service

Answer №1

Answer №2

Answer №3

Similar questions

Send parameters to the $http service from a directive

Is it not feasible to pass a local variable with the same name as a global variable in JavaScript?

What is the preferred method for accessing nested object properties in React props?

What should be placed in the form action field if the router.post() method includes a parameter such as :id?

Leveraging ng-repeat with a nested array in AngularJS

Dynamically loading iframes with JQuery

What is the purpose of using Array.prototype.slice.call(nodeList) for handling DOM elements?

What is the best way to input sorted data from a variable into a textarea field?

Ways to incorporate various styles on a mobile screen for a javascript-generated function

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

What is the best approach to determine the numerical equivalents of options in a dropdown menu using PHP and JS

Is the $scope object shared among all controllers in AngularJS when nested controllers are used?

JavaScript closing of a window

Exploring the functionality of Array.prototype.includes() in Angular 7 with PhantomJS testing

Create a pop-up window within a single controller using Angular.js

Exploring the way Google indexes Angular-based websites with HTML5 URLs

React - 'classProperties' is not currently activated in this setting

Create a Vue JS component that enables the rendering of checkbox inputs and sends the selected values back to the

Adding up whole numbers from a string - JavaScript

Applying a CSS transition to transform properties excluding rotation effects