如何使用AngularJS內置指令與自定義輸入指令

我想寫一個指令來包裝Selectize jQuery插件。我主要使用它，但是我需要處理required和maxlength的驗證。我正在嘗試使用ng-required和ng-maxlength指令，但無法使其工作。我也無法獲得HTML maxlength屬性的工作。我是否應該能夠在我的指令上使用內置的Angular指令，還是需要自己檢查並設置合法性？如何使用AngularJS內置指令與自定義輸入指令

這裏是我的指令代碼：

.directive('selectize', function() { 
    return { 
     restrict: "A", 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      var options = scope.$eval(attrs.options); 
      var formattedOptions = []; 
      for (var i = 0; i < options.length; i++) { 
       var option = options[i]; 
       formattedOptions.push({ 'value': option, 'label': option }); 
      } 

      element.selectize({ 
       options: formattedOptions, 
       labelField: 'label', 
       valueField: 'value', 
       sortField: 'value', 
       searchField: 'value', 
       maxItems: 1, 
       hideSelected: true, 
       persist: false, 
       render: { 
        option_create: function (data, escape) { 
         return '<div class="create">' + data.input + '</div>'; 
        } 
       } 
      }); 

      element.on('change', function() { 
       scope.$apply(function() { 
        ngModel.$setViewValue(element.val()); 
       }); 
      }); 
     } 
    }; 
})

和HTML：

<input selectize 
     options="field.options" 
     ng-model="field.response" 
     class="form-control" 
     ng-required="field.required"> 
</input>

當我檢查這個元素，需要設爲即使的field.required值爲true假。同樣，當我嘗試使用ng-maxlength時，它沒有顯示任何驗證錯誤（ng-maxlength和驗證錯誤HTML未顯示）。使用HTML maxlength屬性並不限制我嘗試輸入的字符數。

任何想法我做錯了什麼？我對指令很陌生，所以如果有任何其他的最佳實踐，我很想隨時指出這些。謝謝！

來源

2014-07-07 jsparks

可能比您的代碼更關心插件。您可能需要在插件API事件中進行驗證 – charlietfl

在閱讀NgModelController上的Angular文檔後，我發現我在自己的指令中沒有正確使用ngModel。在做出以下更改後，我可以使用ng-required和我的自定義指令。

1 - 我改變require: ngModel到require: ?ngModel

2 - 我添加了以下處理selectize輸入不保留存儲在ngModel值：

var selectize = element[0].selectize; 
ngModel.$render = function() { 
    selectize.setValue(ngModel.$viewValue); 
}

3 - 要解決大約摘要已經被錯誤在進行中，我修改了我的元素，使用$ timeout更改：

element.on('change', function() { 
    $timeout(function() { 
     ngModel.$setViewValue(element.val()); 
    }); 
});

來源

2014-07-09 18:05:54 jsparks

如何使用AngularJS內置指令與自定義輸入指令

回答

相關問題