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

【问题标题】：Angular.js: use color code in $watchAngular.js：在 $watch 中使用颜色代码
【发布时间】：2016-08-01 10:26:30
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

您正在传递$scope.backgroundTextColor 的值

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

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

【讨论】：

【解决方案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
});

【讨论】：

【解决方案3】：

而不是将变量原样放在$watch表达式中，尝试返回变量值：

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

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

【讨论】：