0

I'm using the ng-bind-html function to generate input fields for editing text stored in a database on my application. I'm using the $sce and allowing unsafe-html as input will not show up without doing so.

The generated HTML looks like so:

<input class="edit-db" 
       ng-model="db[index-1].values[0][0].value" 
       type="text" placeholder="Enter your answer...">

This will generate an Input field, however the value will be blank. (and not the value of db[index-1].values[0][0].value

However, if I copy the generated HTML and put it into my application manually (without generating it using ng-bind-html) the value shows up. This is telling me that there isn't an issue with the generated code.

Is this a bug with AngularJS, or am I just doing something wrong. Considering if the input is added to the page manually the value appears I'm assuming there's a bug somewhere.

For the users that will ask "Well why not just manually have the input fields in the page" - That is because the amount of inputs is dynamic and changes based on the amount of values present.

Alvaro Silvino
  • 9,441
  • 12
  • 52
  • 80
Hobbyist
  • 15,888
  • 9
  • 46
  • 98
  • this looks to be a flaw in your overall design. the inputs being dynamic shouldn't be a problem if you used `ng-repeat` instead of trying to store in text an HTML snippet representing your intended template. The angular way to do this would be to organize your data in the controller so that the data can be iterated, not generated. – Claies Oct 03 '15 at 02:25
  • in a properly architected angular application, the HTML will be a reflection of the data hierarchy, rather than a composition of seemingly unrelated pieces. – Claies Oct 03 '15 at 02:27

3 Answers3

0

You could try 

ng-model="{{db[index-1].values[0][0].value}}"

I am a beginner in Angular but hope this works!

claudia1201
  • 25
  • 3
  • 11
  • Nope, but thanks. This has something to do with `ng-bind-html` values not being compiled I think. I've tried a basic compilation directive, but no luck. – Hobbyist Oct 02 '15 at 18:44
0

Ok, the issue is that angularjs is not aware of this element. Hence, this element has to go through the $compile phase for angular to know that it has ngModel attribute.

The answer in this post should help you solve your issue

Community
  • 1
  • 1
Aakash
  • 1,751
  • 1
  • 14
  • 21
0

Is this in a ng-repeat?

If it is should look like something like this.

<div ng-repeat= "item in items"> <input class="edit-db" ng-model="item.db[index-1].values[0][0].value" type="text" placeholder="Enter your answer..."> <div>'=

You need to let the ng-repeat know that this is the value associated with that item in the items array by add items. in front of you ng-model variable.

Also be sure to include the ngSanitze module dependency. You will need to include angular-sanitize.js and inject it into your app module.

Richard
  • 36
  • 3