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.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -