Question

我创建了一个指令，并希望使用带有属性wm.data.typeName的动态模板。

wm.data.typeName = "<span>html code</span>"

<fill-choose model-input="wm.data.modelInput" text="wm.data.typeName"></fill-choose>

和指令fillChoose 是

(function() {
  'use strict';

  angular
    .module('learn')
    .directive('fillChoose', fillChoose);

  /** @ngInject */
  function fillChoose($showdown) {
    var directive = {
      restrict: 'AE',
      template: function(elem, attr) {
        //return $showdown.makeHtml(fill.modelInput);
        return '<div>'+ attr.modelInput +'</div>';
      },
      scope: {
        modelInput: '=',
        text: '='
      },
      controller: FillChooseController,
      controllerAs: 'fill',
      bindToController: true
    };

    return directive;

    /** @ngInject */
    function FillChooseController($scope) {
      var vm = this;
    }
  }

})();

但通过这种方式，模板将为<div>wm.data.modelInput</div>。

如何将模板设为<div><span>html code</span></div>？

Answer 1

 link: function(scope, elem, attr) {
    //return $showdown.makeHtml(fill.modelInput);
    elem.html($compile('<div>{{fill.modelInput}}</div>')(scope));
  }

现在这个案例很简单

template:'<div>{{fill.modelInput}}</div>';

会工作，但我给了$ compile的东西，因为你可能只给出了你真正想做的简化版本。

Answer 2

你必须打印它

<fill-choose model-input="{{ wm.data.modelInput }}" text="wm.data.typeName"></fill-choose>

但这将一次，因为当初始化指令时，模板函数将调用一次（当angular calles编译为编译模板时）那就是你需要通过指令的范围

传递它的原因

如何使用指令属性值创建动态模板

2 个答案: