I have created a custom dropdown/select directive to replace the default select boxes within my form. I also have some buttons that are set to disable while the form remains in its pristine state.
app.directive('dropdown', function ($timeout) {
return {
restrict: 'E',
template: '<div class="btn-group" dropdown>' +
'<button id="dropdownDirective" class="btn dropdown-toggle" dropdown-toggle>' +
'{{ items[ngModel].name }}' +
'<span class="caret"></span>' +
'</button>' +
'<ul class="dropdown-menu" role ="menu" aria-label="dLabel">' +
'<li ng-repeat="item in items">'+
'<a href="#" ng-bind="item.name" ng-click = "select(item)" >< / a >' +
'</li>'+
'</ul>'+
'</div>',
scope: {
ngModel: '=', // selected option
items: '=', // options
},
link: function (scope, element, attrs) {
scope.select = function (item) {
scope.ngModel = item.id;
};
}
};
});
In HTML:
<dropdown id="customSelect"
ng-model="ahs.custom.modalId"
items="es.custom.data">
</dropdown>
Although I have implemented this directive, the $pristine property is not being triggered as expected. Could someone please advise me on what could be going wrong?