AngularJS $从templateURL编译HTML

Question

有以下方法可以在AngularJS中动态添加HTML

   var template = '<div>{{value}}</div>';
   var element = angular.element(template);
   placeholder.replaceWith(element);
   $compile(element)($scope);

是否可以分别从templateURL或加载模板执行相同的操作？(使用标准机制,以便将其缓存在$ templateCache中)

Answer 1

当然,您只需使用$http服务来获取模板,然后手动编译并插入.$http服务将隐式处理缓存.

PLUNKER

(最简单)指令:

app.directive('message', [
  '$http',
  '$compile',
  function($http, $compile) {
    var tpl = "template.html";

    return {
      scope: true,
      link: function(scope, element, attrs){
        scope.message = attrs.message;

        $http.get(tpl)
          .then(function(response){
            element.html($compile(response.data)(scope));
          });
      }
    };

  }
]);

视图:

<span message="Hi World!"></span>
<span message="My name is Angular."></span>

指令模板(template.html):

<span>{{message}}</span>