通过ng-include渲染字符串模板

Question

我正在尝试呈现一段动态路线上可用的html，该路线是通过$http.get()调用获取的，它返回了一段html，

仅举一个例子，我尝试加载此html部分：

<h1>{{ pagetitle }}</h1>
this is a simple page example

我做了一个小提琴，以模拟问题，但是为了简单起见，我省去了http调用，只是将html添加到了作用域中的字符串中。

控制器是：

function Ctrl($scope) {
    $scope.data = {
        view: "<h1>whaaaaa</h1>"        
    }; 
}

页面html是这样的：

<div ng-app="">
  <div ng-controller="Ctrl">
    <div ng-include src="data.view"></div>
  </div>
</div>

问题在于，它不会将字符串添加到html文件（ng-include）中，但是会明显地对由该字符串组成的url进行http调用。

因此，不可能仅将字符串输入到包含中吗？如果不是，那么对动态网址进行http调用并将返回的网址输入页面的正确方法是什么。

您可以在JSFiddle中使用它。

Answer 1

您可以向模板缓存中添加静态挂钩，因此，假设您有一个获取模板的服务：

myApp.service('myTemplateService', ['$http', '$templateCache', function ($templateCache) {
  $http(/* ... */).then(function (result) {
    $templateCache.put('my-dynamic-template', result);
  });

  /* ... */
}]);

然后，您可以执行以下操作：

<div include src=" 'my-dynamic-template' "></div>

注： 参考名称必须被包裹在单引号，这总是字节我.... 注意

请注意，在angular尝试解析URL之前，必须将其分配给模板缓存。

编辑：

如果动态URL逻辑足够简单，则还可以在ng-include中使用条件，例如

<div ng-include="isTrue() && 'template1.html' || 'template2.html'"