CODEWITHSUNDEEP
angularjsangularjs-scope
ankakusu
ankakusu

Reputation: 1828

Changing a scope variable in different modules

I have variable called "name" in the $scope namespace($scope.name).

I modify this variable from different controllers and from different modules. The code is provided below:

var myApp = angular.module('myApp',['myModule', 'anotherModule']);

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

myModule.controller( 'MyCtrl', [ '$scope', function($scope) {
    $scope.name = 'Superhero';
    console.log("My module");
} ]);

myModule.controller( 'MyCtrl2', [ '$scope', function($scope){
    $scope.name = 'Another hero';
}]);

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

anotherModule.controller( 'AnotherCtrl', [ '$scope', function($scope){
     $scope.name = 'Hero';
     console.log("Another Module");
}]);

I expect all of the variables to be synced to the same variable. However, each "name" variable has different values at different controllers.

Why? and how can I make all those same variables to be synced?

Here is the JSFiddle: http://jsfiddle.net/yaprak/3Bc7f/1/

Upvotes: 0

Views: 1901

Answers (3)

Dinesh ML
Dinesh ML

Reputation: 931

You can use $rootScope instead of $scope. Now all scope of name have hero.

var myApp = angular.module('myApp',['myModule', 'anotherModule']);

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

myModule.controller( 'MyCtrl', [ '$rootScope', function($rootScope) {
    $rootScope.name = 'Superhero';
    console.log("My module");
} ]);

myModule.controller( 'MyCtrl2', [ '$rootScope', function($rootScope){
    $rootScope.name = 'Another hero';
}]);

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

anotherModule.controller( 'AnotherCtrl', [ '$rootScope', function($rootScope){
     $rootScope.name = 'Hero';
     console.log("Another Module");
}]);

Upvotes: 0

JoakimB
JoakimB

Reputation: 1206

It's because they reside in different scopes. To sync $scope.name to the same value, you need to create a service that holds the value.

By default, controllers can't share data, but controllers and services can.

Update

I updated your fiddle

http://jsfiddle.net/3Bc7f/6/

var myApp = angular.module('myApp',['myModule', 'anotherModule']);

var myModule = angular.module('myModule', ['myFactory']);

myModule.controller( 'MyCtrl', [ '$scope', 'data', function($scope, data) {
    $scope.name = data.name;
    console.log(data.name);
} ]);

myModule.controller( 'MyCtrl2', [ '$scope', 'data', function($scope, data) {
    $scope.name = data.name;
    console.log(data.name);
}]);

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

anotherModule.controller( 'AnotherCtrl', [ '$scope', 'data', function($scope, data) {
    $scope.name = data.name;
    console.log(data.name);
}]);

angular.module('myFactory', [])

    .factory('data',[ function() {

        return {
            'name': 'John Doe'
        };

    }])

;

Upvotes: 2

mutant_america
mutant_america

Reputation: 738

You should use service with two way binding data

var storage = { name : 'Tolya'}

myApp.service('srv', function() {
    return storage;
})

http://jsfiddle.net/molo4nik11/3Bc7f/2/

Upvotes: 0

Related Questions