angularjs - How to support ng-model in my custom input (angular directive) -
i'm working on angular directive form input kind of widget. user picks values using input , want result available in ng-model, that:
<mydirective ng-model="mod"> </mydirective>
i heard got lot easier in new versions of angular 1.
upd saw similar question think way has been proposed of overengineering. posted short answer own question utilises link
function.
i think got 1 way it. suppose need directive consists of 1 input , 1 dropdown. want use form input ng-model. concatenated result going put ng-model.
my solution in directive have bunch of ng-models watch scope.$watch. every time updated update ngmodel parameter injected scope. code looks this:
directive:
angular.module('oneclickregistration') .directive('awesomedir', function () { var tpl = "<div> \ <input type='text' ng-model='model.num' size='80' /> \ <select ng-model='model.unit'> \ <option value='secs'>seconds</option> \ <option value='mins'>minutes</option> \ <option value='hours'>hours</option> \ <option value='days'>days</option> \ </select> \ </div>"; return { template: tpl, restrict: 'e', scope: { ngmodel: '=' }, link: function (scope) { scope.$watchgroup(['model.num','model.unit'], function(newvalues, oldvalues, scope){ scope.ngmodel=newvalues[0]+ " " + newvalues[1]; }) } }; });
and here how use directive:
<awesomedir ng-model="record.dir_res"></awesomedir>
Comments
Post a Comment