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中的宽度和高度会更新。但风格本身似乎并没有更新。谁能告诉我这里做错了什么？

我尝试了以下所有方案

使用$ scope。$ apply .. - 引发错误，说明$ apply已在进行中..
$ rootScope。$ apply - 与上述相同。
在另一个控制器中观看$ $的服务中设置另一个变量。 - 没有看到变化。

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

Answer 1

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

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

http://jsfiddle.net/DyHHJ/

Answer 2

AlbumCtrl中的$scope.$watch仅监视reference inequality，这是通过！== 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);

第三个参数true告诉angular通过angular.equals函数确定watchExpression的不等式。它正确地确定更新的master对象已更改，并更新myprop

AngularJS ng-style不随属性而变化

2 个答案: