How to bind a controller to dynamically added HTML?

Question

I am inject html inputs from the controller and I am trying to bind the scope variables but its not working.

Here is my code
HTML :

    <div ng-controller='addHTML'>
       <div ng-bind-html="trustedHtml"></div>
       <code>{{user}}</code>
    </div>

CSS :

var app = angular.module('app',[]);
var addHTML = function ($scope,$sce) {
     $scope.user = {};
     $scope.user.someVariable = "";

    //inject some html
    $scope.html = '<input type="text" ng-model="user.someVariable">';
    $scope.trustedHtml = $sce.trustAsHtml($scope.html);

};

You can find it on the fiddle here : http://jsbin.com/miluguni/1/watch?html,js,output
When typing in the input the scope variables isn't changed.

You need to run your HTML through the $compile service first. — Gabe
– Gabe, Commented Feb 20, 2014 at 17:36

Ilan Frumer · Accepted Answer · 2014-02-20 17:45:14Z

4

ngBindHtml directive does not $compile templates, it only inserts the template to the DOM.

I copied ngBindHtml ( source code ) and added $compile to it

new Directive:

app.directive('compileHtml',['$sce', '$parse', '$compile', 
  function($sce, $parse, $compile){
  return {
    link: function(scope,element,attr){
      var parsed = $parse(attr.compileHtml);
      function getStringValue() { return (parsed(scope) || '').toString(); }            
      scope.$watch(getStringValue, function (value) {
        var el = $compile($sce.getTrustedHtml(parsed(scope)) || '')(scope);
        element.empty();
        element.append(el);        
      });       
    } 
  };
}]);

Template:

<div compile-html="trustedHtml"></div>

Here is a demo : http://jsbin.com/miluguni/3/edit

answered Feb 20, 2014 at 17:45

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind a controller to dynamically added HTML?

1 Answer 1

Here is a demo : http://jsbin.com/miluguni/3/edit

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is a demo : http://jsbin.com/miluguni/3/edit

Comments

Your Answer

Sign up or log in

Post as a guest

Related