Angular ng-model don't work

Question

I'm trying to replace specific string in my text with inputs with ng-models. I used following code:

inlinetext.replace(buffer[x], '<input ng-model="singleQuestion.inlines[' + x + '].checkAnswer" type="text">');

It render HTML input field in view as expected:

<input ng-model="singleQuestion.inlines[0].checkAnswer" type="text">

But ng-model won't update model. I've actually tried to hard-code the same piece of code in HTML view and it worked perfectly. So it must be something in way how angular render view.

My goal is to display text paragraph where are specific words replaced with inputs (with ng-model property). Problem is that Angular doesn't compile anything that you put in view through .replace() function.

Does anybody have some idea how to do that?

Guess you need to compile the element after replace of HTML, something like `$compile(yourElement)(scope);` — Narain Mittal, Mar 14 '16 at 21:34
That's not working. I created directive `app.directive('dynamic', function ($compile) { return { restrict: 'A', replace: true, link: function (scope, ele, attrs) { scope.$watch(attrs.dynamic, function(html) { ele.html(html); $compile(ele.contents())(scope); }); } }; });` and changed output to: `inlinetext.replace(buffer[x], '
');` Or did you have other idea? — Aleš Chromec, Mar 15 '16 at 21:16
Sorry I did not understand what you are trying to achieve. Can you post more code for the directive and how is that being used? — Narain Mittal, Mar 15 '16 at 21:23
My goal is to display text paragraph where are specific words replaced with inputs. Problem is that Angular doesn't compile anything that you put in view through .replace() function. Currently trying to find some workaround. Actually there is no more code for directive that I posted in previous comment. — Aleš Chromec, Mar 15 '16 at 21:36
What I need to know before proposing a solution is how the directive is being used. Some things are still not clear from the code you posted above: what is buffer? what does attrs.dynamic contain? — Narain Mittal, Mar 15 '16 at 21:47
Buffer is an array of words that needs to be replaced. Actually I don't know much about directive code. It's copied from another answer [link](http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database) If it's possible to do this without directive it would be fine as well. I was thinking of use jQuery code in view - but still not have working solution. — Aleš Chromec, Mar 16 '16 at 05:37

score 0 · Accepted Answer · answered Mar 16 '16 at 09:24

Finally I've figured it out right way. Here is complete code for replace string with Angular compiled element in case anyone needed it.

<script>
  var testApp = angular.module('testApp', []);

  testApp.directive('dynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      link: function (scope, ele, attrs) {
        scope.$watch(attrs.dynamic, function(html) {
          ele.html(html);
          $compile(ele.contents())(scope);
        });
      }
    };
  });

  testApp.controller('PhoneListCtrl', function ($scope) {

  // Initializace text
  var inlinetext = 'Lorem ipsum dolor form sit amet, consectetur adipiscing elit. Vivamus in form ultricies ipsum. Quisque finibus lacus neque, sed tempor lectus form gravida nec. Nam egestas dui vel elit lacini';

  // Replace string and bind it to directive
  $scope.html = inlinetext.replace('form', '<input type="text" ng-model="demo">');
});
</script>

This is the result

Angular ng-model don't work

1 Answers1