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

Question

如何在字符串变量中使用颜色代码并将此变量link用于 $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

与其将变量原样放置在 $watch 表达式中，不如尝试 return 变量值：

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

我更喜欢使用变量本身，而不是它的 HTML 字符串表示形式 (backgroundTextColor)，这样您就可以更加了解视图。

Answer 2

您正在传递 $scope.backgroundTextColor

的值

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

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

Answer 3

您正试图在此处使用魔法字符串。

Angular 中的 $watch 函数可以接收一个 returns 您想要观察的值的函数，或者一个引用您想要观察的变量的字符串手表（一根神奇的绳子）。

字符串将引用变量，就像您在 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
});

Angular.js: use color code in $watch