AngularJS:在指令控制器中呈现HTML

时间:2015-10-20 09:35:51

标签: javascript html angularjs angularjs-directive controller

我正在编写一个从模板创建文本的指令,但我无法将最终结果呈现为HTML。这是指令:

.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);
        }
      });
    }
  }
});

数据来自控制器,一旦用户选择了某些选项,因此$ watch。

谢谢!

1 个答案:

答案 0 :(得分:2)

您应该使用ng-bind-html将html绑定到div

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