Javascript 通过表单控制器访问div颜色选择器元素

我使用它是为了在我的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>

背景色
恢复以前的
设置默认值

您可以在

div

上设置name属性（或者如果愿意，也可以使用

数据名

）

您遇到了datepicker had（）的类似问题，该问题通过添加对

$setViewValue

的调用得到解决

问题是，

$pristine

中的更改仅由调用

setViewValue（）

触发。Angular的控件，例如

input

为您调用此函数（正如ngModelController文档所述）：

$setViewValue（值）：更新视图值

当视图值更改时，应调用此方法， 通常在DOM事件处理程序中。例如输入 选择并调用它

由于使用

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

我在这里创建了一个这样的例子：

---

为了简化这个例子，我使用了一个表单之外的

输入，而不是颜色选择器，触发了与您相同的问题。它显示了相同的基本问题和解决方案，但更通用，因此可能有助于其他人更轻松地了解其工作原理。
感谢您的时间，dave，尽管在我的示例中，DIV是输入元素（请查看我使用的颜色选择器库）。不幸的是，根据规范，“name”属性不允许在div元素上使用：如果您愿意，data name也可以使用。ng模型也不在该列表中，但它（或数据mg模型）可以使用。html并没有排除使用新属性的可能性——那些文档只是说它本身并没有使用这些属性（但使用数据作为前缀将使您更符合标准。您可以在他们的文档中看到Angular使用
name
作为div的元素：除其他地方外，很抱歉，我没有说得更清楚-当然，您是对的，您的div被用作输入元素。问题是，输入控件需要为$pristine t调用$setViewValueo更新。Angular ui datepicker也有同样的问题，它也通过调用$setViewValue解决了这个问题-我在答案中添加了该问题的链接-这是一个有趣的阅读。因此，我认为遵循Angular ui团队的相同方法使我们在这里有了相当坚实的基础