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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -