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

这是一个显示我目前面临的问题的 fiddle 。当您更改输入时，您会注意到 div 中的宽度和高度正在更新。但是样式本身似乎没有更新。任何人都可以告诉我我在这里做错了什么？

我已经尝试了以下所有场景

1. 使用 $scope.$apply.. - 抛出一个错误，说明 $apply 已经在进行中..
2. $rootScope.$apply - 同上。
3. 在另一个 Controller 中 $watched 的服务中设置另一个变量。 - 没有变化。

如果有人能给我一个答案，那就太好了。如果你能告诉我为什么它没有得到更新，我也会非常高兴。

Answer 1

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

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

http://jsfiddle.net/DyHHJ/