I have recently developed an angular directive that allows users to choose multiple contact types from a modal dialog within an ionic app.
angular.module('SharedModule')
.directive('multiSelect', ['$ionicModal', multiSelect]);
function multiSelect($ionicModal) {
return {
restrict: 'E',
template: [
'<div ng-click="showItems($event)" class="item-icon-right item">',
'{{text}}',
'<i class="icon ion-ios-arrow-right"></i>',
'</div>'
].join(""),
scope: {
'items': '=',
'value': '=ngModel'
},
link: function (scope, element, attrs, $filter) {
//validations
//if (typeof attrs.required != "undefined"){
// // a value is required, hence invalidate this control.
//
//}
//Some specific logic here.
scope.validate = function () {
// validation that kicks in when user chooses to close the modal.
};
scope.$on('$destroy', function () {
scope.modal.remove();
});
}
}
}
When using this directive in my HTML form, it looks like this:
<multi-select
name="contactTypes"
items="contact_types"
text="Contact types"
header-text="Choose contact types"
allow-empty="false"
ng-model="contact.contact_types"
></multi-select>
Query: I am uncertain about how to handle the setting of ng-pristine, ng-required, and ng-untouched classes if a user has not selected anything. Where should I place the custom validation code? What steps do I need to take in order to use this directive just like any other input control with ng-model?