Angularjs 当第三方组件修改文本框值时，如何更新scope/ng模型？

我想用颜色选择器制作一个编辑器

这是一个简化的示例。

我将颜色视为角度范围对象的属性。 我使用颜色选择器使其可选择

 http://www.html5.jp/library/cpick.html 

但选择颜色后，不会影响范围

你有什么想法让它像如何影响这个输入状态的范围一样工作吗

请帮帮我

我尝试绑定一个

change

事件，但它从未触发（可能是因为颜色选择器停止了事件的传播）。因此，我下一步尝试绑定一个

focus

事件，这似乎有效（我注意到文本框失去了焦点，然后在画布隐藏时又将其取回）

HTML:

---

我还要说，如果您直接修改输入文本，它会起作用。Checkout$scope.$apply（），当值在外部更改时，它会强制进行摘要更新

<input type="text" ng-model="data.color" class="html5jp-cpick" cpick>

app.directive('cpick', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            element.bind('focus', function() {
                ngModelCtrl.$setViewValue(element.val());
                scope.$apply();
            });
        }
    }
})