Angular.js：在$ watch中使用颜色代码

Question

如何在String变量中使用颜色代码并将此变量链接到$ watch表达式？

$scope.$watch($scope.backgroundTextColor, function(){
      // code inside function
});

使用示例代码，我得到下一个错误：

"Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 0-0 [#] in expression [#9c5c5c]...

Answer 1

您正在传递$scope.backgroundTextColor

的值

您需要传递变量的名称，例如

$scope.$watch('backgroundTextColor', function(newValue, oldValue){
      // code inside function
});

查看Responding to Scope Changes

Answer 2

您正在尝试使用魔术字符串。

Angular中的$watch函数可以接受一个返回你想要观看的值的函数，或者一个引用你想要观察的变量的字符串（一个魔术字符串）。

该字符串将引用该变量，就像您在HTML中一样。因此，如果您使用$scope（看起来像你），则需要：

$scope.$watch('backgroundTextColor', function(newValue, oldValue){
      // code inside function
});

如果您为控制器设置了别名（例如，使用ControllerAs），则需要参考：

$scope.$watch('ctrl.backgroundTextColor', function(newValue, oldValue){
      // code inside function
});

否则你可以使用一个函数：

$scope.$watch(function() {
    return $scope.backgroundTextColor;
}, function(newValue, oldValue){
      // code inside function
});

Answer 3

而不是将变量置于$watch表达式中，尝试返回变量值：

$scope.$watch(function() { return $scope.backgroundTextColor }, function() {
      // code inside function
});

我更喜欢使用变量本身而不是HTML字符串表示（backgroundTextColor），这样你就更加不了解视图了。