ng-include 不适用于脚本类型="text/ng-template"答案

【问题标题】：ng-include not working with script type="text/ng-template"ng-include 不适用于脚本类型="text/ng-template"
【发布时间】：2017-10-09 22:37:00
【问题描述】：

这是我的 Plunker：

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

单击按钮时，应在“Hello World！”之前插入以下内容跨度：

<script type="text/ng-template" id="tempTest">
  <div>
    <span>Properly Inserted</span> 
  </div>
</script>

当然要减去脚本标签。

我通过动态插入以下 div 来实现这一点：

<div ng-include="tempTest"></div>

然后编译它。但是，如果你看日志，编译后唯一剩下的就是这个：

<!-- ngInclude: tempTest -->

这里发生了什么？为什么我的插入不能正确编译？逻辑如下：

$scope.insert = function(){
    // Create elements //
    var container = angular.element('<div id="compiled-container"></div>');
    var element = angular.element('<div ng-include="tempTest"></div>');

    //Insert parent Container
    $('#greeting').before(container);

    // insert the element
    $animate.enter(element, container);

    // test insertion
    console.log("Before Compile: " +container.html() )

    $compile(element);

    //look again after compile
    console.log("After Compile:  " +container.html() )

};

【问题讨论】：

标签： angularjs

【解决方案1】：

快速的答案可能是：

<div ng-include="'tempTest'"></div>
可能您只是忘记了引用模板的单引号。

长答案：

不建议访问控制器内的 DOM - 你会遇到麻烦，因为代码将被$scope.$apply() 调用淹没。考虑使用指令实现此功能。我试图在这里从您的代码创建一个起点

http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3

var app = angular.module('plunker', ['ngAnimate']);

app.directive('greeting', function($compile){
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: '<div>'+
              '  <span>Hello {{name}}!</span>'+
              '  <button ng-click="insert()">test</button>'+
              '</div>',
    link: function(scope, element, attrs) {
       scope.insert = function() {
         var container = angular.element('<div ng-include="\'tempTest.html\'"></div>');
         element.before($compile(container)(scope));
       }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

<greeting name="name"></greeting>

模板元素被插入到 Hello World! 之前！每次单击按钮时的文本节点。

旁注您甚至不需要scope{ name: '='}，因为该指令将继承其周围的范围，但它是一种将控制器变量显式传递（实际上是绑定）到指令的更简洁的方式。

【讨论】：

您不仅对模板 ID 周围的单引号是正确的，而且在您的出色示例中我还看到我没有正确的这一行：$compile(element)($scope);。我没有($scope) 部分。此外，您对指令是绝对正确的。事实上，我的实际代码在指令中。我只是想尽快将我的问题的一个例子放在一起。您的指令有一些有趣的元素，我将自己使用它们，非常感谢您的帮助！
是否可以引用另一个 html 文件中的 ng-template 文本模板？如果模板不在同一个文件上或之前已加载，Angular 如何知道如何处理模板？

【解决方案2】：

<div ng-include src="tempTest"></div>

这应该可以工作

^^^ 请注意，除非添加单引号（正如@JHixson 已经指出的那样），否则这不会甚至开始工作，就像这样：

<div ng-include src="'tempTest'"></div>

【讨论】：

tempTest 需要有单引号，就像在接受的答案中一样。
我不赞成（在我看来）；原始响应不正确，足以误导不了解必要语法的人。
如果传入的字符串引用了包含正确 url 的字符串，则它实际上可以在没有单引号的情况下 正常工作

【解决方案3】：

只需你的脚本：

<script type="text/ng-template" id="tempTest">
  <div>
    <span>Properly Inserted</span> 
  </div>
</script>

必须像这样在 MainCtrl 控制器选择器内：

<div ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="tempTest">
<div>
<span>Properly Inserted</span> 
</div>
</script>
</div>

【讨论】：