9

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

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. 在另一个控制器中 $watched 的服务中设置另一个变量。- 没有看到任何变化。

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

4

2 回答 2

12

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

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

http://jsfiddle.net/DyHHJ/

于 2012-05-24T12:02:12.200 回答
1

您$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);

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

于 2014-08-21T22:17:47.387 回答