AngularJS：在指令控制器中呈现 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);
        }
      });
    }
  }
});

数据来自控制器，一旦用户在一些选项之间进行了选择，因此 $watch。

谢谢！

Answer 1

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

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