AngularJS ng样式不会随属性更改 [英] AngularJS ng-style not changing with property

问题描述

我似乎无法弄清楚为什么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/

这是一个小提琴，显示了我当前面临的问题.您会注意到，更改输入时，div中的宽度和高度正在更新.但是样式本身似乎并没有更新.有人可以告诉我我在做什么错吗?

我已经尝试了以下所有情况

1. 使用$ scope.$ apply ..-引发错误，指出$ apply已经在执行中..
2. $ rootScope.$ apply-与上面相同.
3. 在另一个控制器中监视的服务中设置另一个变量. -没有发现变化.

如果有人能给我答案，那真的很酷.如果您能告诉我为什么它没有得到更新，那也将非常高兴.

解决方案

您已一次性将宽度和高度值分配给myprop样式字段.因此，当您更改宽度或高度时，myprop不会改变.

将myprop值更改为计算其值的函数...

http://jsfiddle.net/DyHHJ/

I cant seem to figure out why the style property is not getting updated. In my larger application it seems to work fine.

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/

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?

I have tried all the following scenarios

1. using $scope.$apply.. - Throws an error stating $apply already in progress..
2. $rootScope.$apply - same as above.
3. Setting another variable in a service which is $watched in the other controller. - no change seen.

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.

解决方案

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.

Change the myprop value to a function that computes its value instead...

http://jsfiddle.net/DyHHJ/

这篇关于AngularJS ng样式不会随属性更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！