Javascript AngularJS ng-style 不随属性变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10736957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-style not changing with property
提问by ganaraj
I cant seem to figure out why the style property is not getting updated. In my larger application it seems to work fine.
我似乎无法弄清楚为什么 style 属性没有得到更新。在我较大的应用程序中，它似乎工作正常。
angular.module('Model', [])
.factory('SizeModel', function () {
return {
width: 200,
height: 100,
display:"block",
getCombined: function() {
return parseInt(this.width) + parseInt(this.height);
}
};
});
function AlbumCtrl($scope,SizeModel) {
$scope.master = SizeModel;
$scope.$watch("master",function(){
$scope.myprop = { display: $scope.master.display,
backgroundColor: "#333",
width: $scope.master.width+'px',
height: $scope.master.height+'px',
color: "#FFF"
};
});
}
function AnoCtrl($scope,SizeModel) {
$scope.master = SizeModel;
$scope.toggle = function(){
$scope.master.display = "none";
}
}
function EditCtrl($scope,SizeModel) {
$scope.master = SizeModel;
}
http://jsfiddle.net/ganarajpr/C2hRa/4/
http://jsfiddle.net/ganarajpr/C2hRa/4/
Here is a fiddle which shows the issue I am currently facing. You will notice that the width and height are getting updated in the div when you change the input. But the style itself doesnt seem to be updating. Anyone can tell me what I am doing wrong here?
这是一个小提琴，显示了我目前面临的问题。当您更改输入时，您会注意到 div 中的宽度和高度正在更新。但风格本身似乎并没有更新。任何人都可以告诉我我在这里做错了什么？
I have tried all the following scenarios
我已经尝试了以下所有场景
- using $scope.$apply.. - Throws an error stating $apply already in progress..
- $rootScope.$apply - same as above.
- Setting another variable in a service which is $watched in the other controller. - no change seen.
- 使用 $scope.$apply.. - 抛出一个错误，指出 $apply 已经在进行中..
- $rootScope.$apply - 同上。
- 在另一个控制器中 $watched 的服务中设置另一个变量。- 没有看到变化。
It would be really cool if someone can get me an answer to this. Also would be really happy if you can tell me why exactly it is not getting updated.
如果有人能给我一个答案，那将是非常酷的。如果你能告诉我为什么它没有得到更新，也会很高兴。
回答by Pete BD
You had assigned the width and height values to the myprop style field on a one-off basis. So when you changed the width or height the myprop was not changing.
您已一次性将宽度和高度值分配给 myprop 样式字段。因此，当您更改宽度或高度时， myprop 不会更改。
Change the myprop value to a function that computes its value instead...
将 myprop 值更改为计算其值的函数...
回答by Jonathan Gawrych
Your $scope.$watchin the AlbumCtrl only watches reference inequality, which is determined by strict comparison via the !== Javascript operator. Because you are changing only a property on the object, the reference to masteris still the same and doesn't fire the $watch. You need to pass an additional argument to $watch to use objectEquality. See this plunkr, and here is the relevant code below:
您$scope.$watch在 AlbumCtrl 中仅查看引用不等式，这是通过 !== Javascript 运算符通过严格比较确定的。因为您只更改对象上的一个属性，所以对的引用master仍然相同并且不会触发 $watch。您需要向 $watch 传递一个额外的参数才能使用 objectEquality。看到这个plunkr，这是下面的相关代码：
$scope.$watch("master",function() {
$scope.myprop = {
display: $scope.master.display,
backgroundColor: "#333",
width: $scope.master.width+'px',
height: $scope.master.height+'px',
color: "#FFF"
};
}, true);
The third argument truetells angular to determine inequality of the watchExpression by the angular.equals function. It correctly determines that the the updated masterobject has been changed, and updates myprop
第三个参数true告诉 angular 通过 angular.equals 函数确定 watchExpression 的不等式。它正确确定更新的master对象已更改，并更新myprop
