Angularjs 动态选择数据绑定的模型（通过指令使用jQuery插件）

我得到了Spectrum jQuery插件和双向数据绑定，请参阅。下面是我的指令代码，以便我粘贴一些在

app.directive('picker', function () {
return {
restrict: 'E',
require: 'ngModel',
link: function (scope, el, atts, ngModel) {
  el.spectrum({
    color: '#ffffff',
    flat: true,
    move: function (newColor) {
      scope.$apply(function () {
        ngModel.$setViewValue(newColor.toHexString());
      });
    },
    showButtons: false
  });
  ngModel.$render = function () {
    if (document.getElementById('firstColor').value !== "") {
      el.spectrum("set", ngModel.$viewValue);
    }
    };
  }
};
});

我所拥有的： 我可以使用光谱的颜色选择器选择一种颜色，它与输入字段同步。我还可以在输入中输入一种颜色，它会与颜色选择器同步

我想要什么： 问题是我想用同一个颜色选择器选择多种颜色。理想情况下，用户单击“选择第二种颜色”按钮，然后在颜色选择器和第二个输入字段之间进行同步，第一个字段的同步被关闭（它保留其值，可以通过“选择第一种颜色”重新打开）

我如何做到这一点？对于一种颜色，它可以工作，因为颜色选择器和第一个输入使用相同的模型

我搜索了很多，看起来我无法根据单击的按钮（或者我可以？）更改ngModel的值。 也许我可以在$rootScope中使用一个变量，但这是一个糟糕的做法，实际上到目前为止，我无法用它完成工作

---

我必须使用一些观察者和控制器注入还是什么？老实说，我不知道下一步该怎么办。对于一些相当简单的事情来说，所有这些选项似乎都相当复杂。我现在唯一能做的就是将一种颜色的颜色选择器替换为另一种颜色的颜色选择器，但这相当简单。

我认为将一种颜色选择器替换为一种输入很好，因为这样可以使代码更易于管理。我不确定您的UI，它似乎类似于我们附加到每个输入的日期控件date@Chandermani我想要一个大的颜色选择器，而不是两个（或更多）小的。