AngularJS ng 样式不随属性变化

AngularJS ng-style not changing with property

本文关键字：属性 变化 ng 样式 AngularJS      更新时间：2023-09-26

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

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另一个控制器中。 - 未看到任何变化。

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

您已一次性将

宽度和高度值分配给 myprop 样式字段。 因此，当您更改宽度或高度时，myprop 不会更改。

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

http://jsfiddle.net/DyHHJ/

您在 AlbumCtrl 中的$scope.$watch只监视引用不等式，这是通过 ！== Javascript 运算符通过严格比较确定的。 由于仅更改对象上的属性，因此对 master 的引用仍然相同，并且不会触发$watch。您需要向$watch传递一个额外的参数才能使用 objectEqual。 看到这个 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

相关文章：