javascript - Dynamically setting ng-model is breaking -
i have directive html template this:
textinput.html
<label for="{{name}}">{{label}}</label> <input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}" ng-model="{{name}}">
the label outputting correctly, inside of input field outputing static {{varname}}
if remove ng-model this:
<input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}">
it outputs variables correctly, moment place ng-model in , dynamically assign value, breaks entire input.
why happening?
my goal able create simple 1 line text inputs can mass change directive, so:
<textinput name="username" label="username" type="text" placeholder="enter username"></textinput>
finally figured out, have pass ng-model through using 2 way binding this:
<textinput type="email" name="useremail" ng-model="useremail" placeholder="email address..." label="email"></textinput>
-
app.directive('textinput', function() { return { restrict: 'e', scope: { label:'@label', placeholder:'@placeholder', name: '@name', type: '@type', ngmodel: '=ngmodel' }, transclude: true, templateurl: 'directives/textinput.html' }; });
now within template html file can map properties without {{ }}
works ng-model.
example:
<label for="{{name}}">{{label}}</label> <input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}" ng-model="ngmodel">
now it'll super easy generate re-usable form code.