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
});

Answer 2

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

Angular中的$watch函数可以接受返回要监视的值的函数，也可以采用引用要监视的变量的字符串（魔术字符串）。

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

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

如果为ControllerAs设置了别名（例如，使用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 ），这样您就对视图不了解了。