Angular.js。使用服务时双向数据绑定中断

时间:2014-12-24 21:35:40

标签: angularjs

问题是当我在字段中输入文本时,SecondName属性没有更新。

请在jsfiddle查看此代码:http://jsfiddle.net/HEdJF/253/

HTML:

<div ng-app="myApp">
   <div ng-controller="FirstCtrl">


      <div>
         <input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
         <br>FirstName is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
      </div>
      <hr>
      <div ng-controller="SecondCtrl as Second">
            SecondName: {{Second.Data.SecondName}}<!-- How do I automatically updated it here? -->
      </div>
   </div>
</div>

JS:

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

myApp.service('Data', function(){
    var obj;
    return obj = { FirstName: '54',
                  SecondName: '22',
                           f: function(){
                              obj.FirstName = '1';
                              obj.SecondName = obj.FirstName;
                           }
                 };
});

myApp.controller('FirstCtrl', function( $scope, Data ){
  Data.f();
  $scope.Data = Data;
});

myApp.controller('SecondCtrl', function( Data ){
  Second = this;
  Second.Data = Data;
});

3 个答案:

答案 0 :(得分:1)

它不会像你认为的那样工作。这一行:

obj.SecondName = obj.FirstName;

创建一个与SecondName相等的新属性FirstName。但是,由于两个属性都是基本类型(String),因此它们之间没有任何关联。换句话说,obj.SecondName 引用obj.FirstName

您有两种选择。

选项1.(错误)FirstName更改时设置其他观察者,一旦发生这种情况,分别更新SecondName

$scope.$watch('Data.FirstName', function() { Data.SecondName = Data.FirstName; });

http://jsfiddle.net/HEdJF/254/

选项2。不要引入其他观察者并更改您的体系结构。例如,在第二个控制器中也使用FirstName,因为它们应该是相等的。

http://jsfiddle.net/HEdJF/255/

答案 1 :(得分:0)

由于您的嵌套作用域,这是一个范围问题。请查看此网站以获得清晰的解释:http://toddmotto.com/digging-into-angulars-controller-as-syntax/。在“嵌套范围”部分下,有一些不同的解决方案可以解决您的问题。

答案 2 :(得分:0)

您的代码的问题是第一个控制器只是更改Data.FirstName对象的值,因此更改不会反映在您的第二个控制器上,因为SecondName的值在初始化之后不会更改第一控制器。所以你必须设置Data.SecondName 在你的数据中也是如此。

或者,您可以这样做。

 <div>
         <input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
         <br>FirstName is : <strong>{{Data.SecondName=Data.FirstName}}</strong><!-- Successfully updates here -->
      </div>

您也可以使用指令来实现此功能,但我想您只是在寻找上述解决方案。

干杯!