觸發ng-change功能，無需在AngularJS中使用keyup或keypressed

Question

我在輸入類型文本上應用了ng-model和ng-change指令，它顯示了hexa中的顏色，可以從顏色面板更改，如圖所示。

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

現在，當我打開顏色面板並更改顏色時，新的六進制代碼顯示在輸入類型文本中，但colorChanged函數不會觸發。 它只在我點擊文本框並寫一些東西時觸發。

當我從彩色面板中刪除任何字符或值時，我希望它被觸發。

我試過像這樣的手表

$scope.colors = {
        primary_color: "#008fff",
        secondary_color:"#008fff",
        text_color: "#008fff"
    }
$scope.$watch('colors', function (nval, oval) {
        console.log(nval);
    });
$scope.colorChanged = function() {
        $rootScope.$broadcast('color-change', {colors: $scope.colors});        
    }

但它也沒有觸發。

如果我使用$ 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>

然后，您可以通過使用沒有參數的$setViewValue()以編程方式觸發ng-change指令：

$scope.form.primary_color.$setViewValue()

當ng-model被更改而不實際更改它時，將觸發ng-change 。

演示 - > http://plnkr.co/edit/PmthIfblkPkbKgRInLBc?p=preview

Answer 2

如果您使用此插件 ，則您在color-picker-model屬性中指定的變量將被視為顏色選擇器的綁定變量。 因此，要檢測所選顏色的變化，您可以觀察該變量。 在你的情況下：

$scope.$watch('primaryColorModel', function(nval, oval) {
  //your code here
});

Answer 3

我不知道你用過哪個插件，但除非它是用angular構建的，否則你可能需要連接一個運行$rootScope.$apply()的回調$rootScope.$apply() 。 原因是這段代碼發生在angulars生態系統之外，需要通知它重新運行。 在這里看到我的類似答案： AngularJS：當模型元素從模型數組拼接時，ng-repeat列表不會更新