Question

我在输入类型文本上应用了ng-model和ng-change指令，它显示了六边形的颜色，可以从颜色面板中更改，如图所示。

override func viewDidLoad() {
    super.viewDidLoad()

    let shortText = "Single line"
    self.label.attributedText = self.getAttributedText(text: shortText, kern: 0.2, lineSpacing: 8)
    self.label2.attributedText = self.getAttributedText(text: shortText, kern: 0, lineSpacing: 8)
}

private func getAttributedText(text: String, kern: CGFloat, lineSpacing: CGFloat) -> NSAttributedString {
    let attributedString = NSMutableAttributedString(string: text)

    let style = NSMutableParagraphStyle()
    style.lineSpacing = lineSpacing

    let attributes: [NSAttributedStringKey : Any] =
        [.paragraphStyle : style,
         .kern: kern]

    attributedString.addAttributes(attributes,
                                   range: NSMakeRange(0, attributedString.length))

    return attributedString
}

现在，当我打开彩色面板并更改颜色时，新的六进制代码会显示在输入类型文本中，但colorChanged函数不会触发。它只在我点击文本框并写一些东西时触发。

当我从彩色面板中删除任何字符或值时，我希望它被触发。

我尝试过像这样的手表

 <input type="text" ng-model="colors.primary_color"
        ng-change="colorChanged()" class="input-control" 
        placeholder="Primary Color"
        color-picker
        color-picker-model="primaryColorModel"
        color-picker-position="{{colorPickerPosition}}">
 <button class="btn-sidebar">
     <svg width="20px" height="21px">
           <path ng-style="{fill: primaryColorModel}" d="M10.000,3.429 C5.865,3.429 2.500,6.793 2.500,10.928 C2.500,15.063 5.865,18.427 10.000,18.427 C10.000,14.550 10.000,7.089 10.000,3.429 M10.000,0.929 C15.523,0.929 20.000,5.406 20.000,10.928 C20.000,16.450 15.523,20.927 10.000,20.927 C4.477,20.927 -0.000,16.450 -0.000,10.928 C-0.000,5.406 4.477,0.929 10.000,0.929 L10.000,0.929 Z"
                        />
     </svg>
 </button>

但它也没有触发。

如果我使用$ apply，它表示你已经处于消化周期。

Answer 1

如果您将相关标记放在<form>元素中并为<input>命名：

<form name="form">
    <input name="primary_color" type="text" ng-model="colors.primary_color"
        ng-change="colorChanged()" class="input-control" 
        placeholder="Primary Color" 
        color-picker color-picker-model="primaryColorModel"
        color-picker-position="{{colorPickerPosition}}">
  ...
</form>

然后，您可以使用没有参数的ng-change以编程方式触发$setViewValue()指令：

$scope.form.primary_color.$setViewValue()

在ng-change更改后会触发ng-model，而不会实际更改它。

演示 - ＆gt;的 http://plnkr.co/edit/PmthIfblkPkbKgRInLBc?p=preview

Answer 2

如果您使用的是this plugin，那么您在$scope.$watch('primaryColorModel', function(nval, oval) { //your code here });属性中指定的变量将被视为颜色选择器的绑定变量。因此，要检测所选颜色的变化，您可以观察该变量。在你的情况下：

{{1}}

Answer 3

我无法判断你使用的是哪个插件，但除非它是使用angular构建的，否则你可能需要连接一个运行$rootScope.$apply()的回调。原因是这段代码发生在angulars生态系统之外，需要通知它重新运行。请在此处查看我的类似答案：AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

触发ng-change功能，无需在AngularJS中使用keyup或keypressed

3 个答案: