javascript - AngularJS:在指令 Controller 中呈现 HTML

Question

我正在编写一个用于从模板创建文本的指令，但我无法将最终结果呈现为 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);
        }
      });
    }
  }
});

数据来自 Controller ，一旦用户在某些选项之间做出选择，$watch 就出现了。

谢谢!

Answer 1

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

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