问题是当我在字段中输入文本时,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;
});
答案 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
,因为它们应该是相等的。
答案 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>
您也可以使用指令来实现此功能,但我想您只是在寻找上述解决方案。
干杯!