Angular.JS數據綁定

我已經開始學習angular.js，但是我對理解數據綁定和範圍有困難。Angular.JS數據綁定

這裏是我的HTML文件：

<!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>

現在，當我有這個模塊，我目前的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]"};*/ 
    }); 

})();

我做的任何文本框的任何變化說「的名字「投入反映並且無處不在。示例我在第二個控制器中使用name =「name」對輸入文本進行了更改，第一個文本框中的值也會更改，但是當我從我的javascript文件中刪除註釋時，我在第二個控制器輸入框不反映在第一個輸入框中。爲什麼？

來源

2015-12-21 Ishan Soni

如果你的意思是它們沒有在firstController中反映，那是因爲$ scope是不同的。 firstController有他自己的作用域，secondController有他自己的作用域。如果你想從最糟糕的選項到最好的選項，你可以使用$ rootScope，嵌套控制器和調用父母或只使用服務 – jstuartmilne

$rootScope是所有範圍的父項，所以如果您爲其指定屬性，它將在視圖中的任何位置都可用。每個控制器有$scope，你有兩個兄弟控制器，所以他們有不同的範圍，如果你想在控制器之間共享數據，你應該使用服務。像這樣：

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

然後注射到控制器：

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


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

在這種情況下改變第一控制器將不會在第二和反之亦然反映，因爲每次對象的getData返回新實例（與相同的數據）。

來源

2015-12-21 11:19:48 karaxuna

因此，當我沒有評論我的js文件時，我有3個數據對象。 1個在根作用域，兩個在各自控制器的範圍內。更新其中的任何一個只是更新相應的數據對象。但是當我評論代碼時，有一個數據對象位於每個人正在更新的根範圍內？ –

@IshanSoni是的，如果你只在rootScope中有數據，那麼兩個控制器的視圖將使用相同的數據對象，因此它在任何地方都會改變。 – karaxuna

Angular.JS數據綁定

回答

相關問題