AngularJS: render HTML in directive controller

Question

I'm writing a directive for creating text from templates, but I cannot get to render my final result into HTML. This is the directive:

.directive('description', function($timeout){
  function descriptionCtrl(){
    var self = this;
    self.result = "";
    self.init = function(value) {
      console.log("template in directive",value);
      self.finalValue = "<div>HI <input type='text' id='hi' /></div>";
    };
  }
  return {
    restrict: 'AE',
    controller : descriptionCtrl,
    controllerAs: 'dc',
    scope: {
      text: "="
    },
    replace: true,
    template: "<div id='template'>{{dc.finalValue}}</div>",
    link: function(scope, iElement, iAttrs, ctrl) {
      scope.$watch("text", function(value){
        if(value!==undefined){
          $timeout(ctrl.init(value),0);
        }
      });
    }
  }
});

The data comes from the controller and once the user has chosen between some options, hence the $watch.

Thank you!

Pankaj Parkar · Accepted Answer · 2015-10-20 09:45:44Z

2

You should use ng-bind-html to bind html to the div

template: "<div id='template' ng-bind-html='dc.finalValue'></div>",

edited Oct 20, 2015 at 9:45

answered Oct 20, 2015 at 9:38

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Ramon Over a year ago

Perfect, thanks! I had to add as well the 'ngSanitize' to the module and the $sce.trustAsHtml(value) for having accepted the input.

Collectives™ on Stack Overflow

AngularJS: render HTML in directive controller

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related