ng-include不适用于脚本类型=“ text / ng-template”

一尘不染

ng-include不适用于脚本类型=“ text / ng-template”

angularjs

这是我的柱塞：

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() )

};

阅读 291

2020-07-04

共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！每次单击按钮时为textnode。

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

2020-07-04