2

我正在使用这个库来向我的 AngularJS 应用程序添加颜色选择器功能。我想让我的客户使用一种颜色，然后它会在他面前显示为带有圆角的小方形 div（不是颜色的十六进制，因为我的用户不是技术人员）。问题来了，当我想让我的用户恢复他们以前的选择时，以防他们不喜欢他们当前的选择（此信息存储在服务中）。

我想访问应用 colorPicker 指令的 div 的 $pristine 和 $dirty 属性，问题是给 div 命名不是有效的 HTML 标记。

是否有一种“角度方式”来做到这一点（使用内置的 $pristine 和 $dirty）或者我是否必须通过在我的服务中存储一个布尔标志来破解我的方式？

<form name="designForm">
        <div class="formLine">
            <div class="miniFieldContainerSettings">
                Background Color
            </div>
            <div class="mediumFieldContainerSettings">
                <div data-colorpicker name="bgColor" class="colorSample" ng-model="model.formData.settings.background_color" data-ng-style="{backgroundColor : model.formData.settings.background_color}"><!--CANNOT GIVE A NAME ATTRIBUTE TO A DIV-->
                </div>
                <span class="btn btn-link" data-ng-disabled="designForm.bgColor.$pristine" data-ng-click="model.setDefaultColor('bgcolor')">
                    Restore previous
                </span>
                <span class="btn btn-link" data-ng-click="model.setDefaultColor('bgcolor', true)">
                    Set default
                </span>
            </div>
        </div>
</form>
4

1 回答 1

1

您可以在 a 上设置名称属性div（或者data-name如果您愿意，也可以使用）。

您遇到了 datepicker 遇到的类似问题（datepicker 和 ngForm 的 $pristine state for field），通过添加对$setViewValue.

问题是更改$pristine仅由调用setViewValue(). Angular 的控件，例如为input您调用此函数（如 ngModelController 文档注释ngModelController）：

$setViewValue(value)：更新视图值。

当视图值发生变化时，应该调用这个方法，通常是在 DOM 事件处理程序中。例如输入和选择指令调用它。

由于您使用 adiv作为控件，因此您需要处理调用$setViewValue()以触发$pristine.

我们可以通过添加一个指令来做到这一点，该指令将在值更改时使用 awatch调用setViewValue()颜色选择器模型。这将导致$pristine被更新：

myApp.directive('updateView', function(){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller){
      scope.$watch(attrs.ngModel, function(newValue, oldValue){
        if (newValue !== oldValue){
            controller.$setViewValue(newValue);
        }
      });
    }}
});

最后，我们将新指令添加到您的div，以便 Angular 将其视为控件：

<div data-colorpicker name="bgColor" class="colorSample" ng-model="model.formData.settings.background_color" data-ng-style="{backgroundColor : model.formData.settings.background_color} update-view">

我在这里创建了一个示例：http: //jsfiddle.net/f6uRe/1/

为了简化示例，我触发了与您使用input表单外部而不是颜色选择器相同的问题。它显示了相同的潜在问题和解决方案，但更通用，因此它可能会帮助其他人更轻松地了解它是如何工作的。

于 2013-11-18T22:03:47.673 回答