CODEWITHSUNDEEP
angularjs
Ishan Soni
Ishan Soni

Reputation: 273

Angular.JS data binding

I have started learning angular.js but I am kind of having trouble understanding the data binding and scopes.

Here is my Html file :

 <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"    />
    <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">   </script>
    <title>Egghead</title>
    </head>
<body data-ng-app="myApp">
1. <div>
    NAME : <input type = "text" name = "name" data-ng-model="data.name"/> 
    Typed Name : <b>{{data.name}}</b>
    <br><br>
    EMAIL: <input type = "email" name = "email" data-ng-model="data.email"/>
    Typed Email : <b>{{data.email}}</b>
</div>

2. <div data-ng-controller="firstController">
    NAME : <input type = "text" name = "name" data-ng-model="data.name"/> 
    Typed Name : <b>{{data.name}}</b>
    <br><br>
    EMAIL: <input type = "email" name = "email" data-ng-model="data.email"/>
    Typed Email : <b>{{data.email}}</b>
</div>

3. <div data-ng-controller="secondController">
    NAME : <input type = "text" name = "name" data-ng-model="data.name"/> 
    Typed Name : <b>{{data.name}}</b>
    <br><br>
    EMAIL: <input type = "email" name = "email" data-ng-model="data.email"/>
    Typed Email : <b>{{data.email}}</b>
</div>  

    <script type="text/javascript" src="app.js"></script>
</body>
</html>

Now when I have this module for my current html :

(function(){
    var myApp = angular.module('myApp', []);

    myApp.controller('firstController', function($scope, $rootScope) {

        /*$rootScope.data = {name : "root", email : "[email protected]"};
        $scope.data = {name : "Ishan", email : "[email protected]"};*/
    });


    myApp.controller('secondController', function($scope) {
        /*$scope.data = {name : "Divyan", email : "[email protected]"};*/
    });

})();

any changes that I make in any of the textbox for say the "name" input reflects and is bound everywhere. Example I make a change in the input text with name = "name" inside the second controller, the value in the text box for first also changes, but when I remove the comments from my javascript file, any change I make in the second controller's input box are not reflected in the first's input box. Why?

Upvotes: 0

Views: 55

Answers (1)

karaxuna
karaxuna

Reputation: 26930

$rootScope is parent of all scopes, so if you assign property to it, it will be available everywhere in views. Every controller has $scope, you have two sibling controllers, so they have different scopes, if you want to share data between controllers, you shall use service. Like this:

myApp.factory('dataSrvc', function () {
    return {
        getData: function () {
            return {
                name : "Divyan",
                email : "[email protected]"
            };
        }
    };
});

Then inject it into controllers:

myApp.controller('firstController', function($scope, dataSrvc) {
    scope.data = dataSrvc.getData();
});


myApp.controller('secondController', function($scope, dataSrvc) {
    scope.data = dataSrvc.getData();
});

In this case changes in first controller will not reflect on second and vice versa, because getData returns new instance of object every time (with same data).

Upvotes: 1

Related Questions