Question

我有一个带有以下代码的指令模板

<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}">&nbsp;</div>
<div class="clearfix"></div>

<div>Standard colors</div>
<div class="color_squares">
    <div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
        <div class="color_swatch" style="background-color: {{ color }};"></div>
    </div>
</div>
<div class="clearfix"></div>

在指令中，我使用以下代码将ngmodel更新为单击的颜色 - “所选颜色”旁边的div将使用所选颜色进行更新。但是，表达式“{{color.trim（）== ngModel.trim（）}}”总是错误。

{{color.trim() == ngModel.trim()}}

我调试了代码，值完全相同。

我缺少什么？

Answer 1

这可能是因为您的变量被精确命名为＆＃39; ngModel＆＃39;请参阅该文章以获得更多解释：http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

要恢复本文：永远不要使用原始字段始终使用点。所以在您的范围更改

$scope.ngModel

通过

$scope.data.ngModel

在你的html中通过data.ngModel更改ngModel。

使用dot时，您可能会遇到一些未定义的错误，这是因为您必须初始化对象：

$scope.data={};

当然你可以jsut重命名你的变量，但你可能仍然有其他指令的问题。

Answer 2

我通过删除颜色周围的花括号并使用ng-style

解决了这个问题

 <div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" >&nbsp;</div>

Angular：视图的一部分不会更新

2 个答案: