Question

问题是当我在字段中输入文本时，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;
});

Answer 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/

Answer 2

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

Answer 3

您的代码的问题是第一个控制器只是更改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>

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

干杯！

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

3 个答案: