AngularJS ng-style不随属性而变化

Question

我似乎无法弄清楚为什么样式属性没有得到更新.在我更大的应用程序中它似乎工作正常.

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. 在服务中设置另一个变量,在另一个控制器中观察$. - 没有看到变化.

如果有人能帮我解决这个问题,真的会很酷.如果你能告诉我为什么没有得到更新,也会非常高兴.

Answer 1

您已经一次性将宽度和高度值分配给myprop样式字段.所以当你改变宽度或高度时,myprop没有改变.

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

http://jsfiddle.net/DyHHJ/