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数据绑定

回答

相关问题