在附加到正文之前使用条件模板编译指令

Question

假设我有一个带有条件模板的指令：

app.directive('postContent', function ($compile) {
  var template = ''
  var text = '<ANY>template for text</ANY>';
  var image = '<ANY>template for image</ANY>';
  var video = '<ANY>template for video</ANY>';
  var compiler = function ($element, $attrs) {
    if (condition1) {
     template = video;
    } else if(condition2) {
     template = image;      
    } else {
     template = text;
   }
  }

  var templateElem = angular.element(template);
  $element.after(templateElem);
  $element.remove();
  var subLink = $compile(templateElem);
  return {
    pre: function(scope, element, attrs) {
      subLink(scope);
    },
    post: function(scope, element, attrs) {
    }
  }

});

condition1 和 condition2 太复杂，无法实现。
如果 condition1 和 condition2 是静态的，这很好用，但问题是，我使用的条件超出了范围，我没有编译器函数的范围。我该怎么办？

Answer 1

首先，"too complicated condition"可以抽象成一个函数，或者计算一次并存储在一个变量中：

link: function(scope){
  scope.condition1 = doVeryComplicatedLogic();
  scope.condition2 = function(){
     return doAnotherComplicatedLogic(scope.param);
  }
}

模板：

<any ng-if="condition1">template for video</any>
<any ng-if="condition2()">template for image</any>
<any ng-if="!condition1 && !condition2()">template for text</any>

但是，如果您坚持，您可以有条件地 compile/link link 函数中的模板：

link: function(scope, element){
   var tmpl = text; 
   if (condition1){
      tmpl = video;
   } else if (condition2){
      tmpl = image;
   }

   element.append(tmpl);
   $compile(element.contents())(scope);
}

在附加到正文之前使用条件模板编译指令

Compile directive with conditional template before it is appended to body

javascript

angularjs

angularjs-directive