javascript - 通过表单 Controller 访问 div 颜色选择器元素

Question

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

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

是否有一种“Angular 方法”可以做到这一点(使用内置的 $pristine 和 $dirty)，或者我是否必须通过在我的服务中存储一个 bool 标志来解决这个问题？

<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>

Answer 1

您可以在 div 上设置名称属性(如果您愿意，也可以使用 data-name)。

您遇到了 datepicker 遇到的类似问题 ( datepicker and ngForm's $pristine state for field )，通过添加对 $setViewValue 的调用解决了该问题.

问题是 $pristine 的变化仅由调用 setViewValue() 触发. Angular 的控件，比如 input为您调用此函数(如 ngModelController 文档注释 ngModelController ):

$setViewValue(value): Update the view value.

This method should be called when the view value changes, typically from within a DOM event handler. For example input and select directives call it.

由于您使用的是 div作为控件，您需要处理对 $setViewValue() 的调用触发 $pristine 的变化.

我们可以通过添加一个使用 watch 的指令来做到这一点调用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 时遇到的相同问题那是在表单之外而不是颜色选择器。它显示了相同的潜在问题和解决方案，但更通用，因此可能会帮助其他人更轻松地了解其工作原理。