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

时间:2014-01-15 22:30:36

标签: angularjs

这是我的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() )

};

3 个答案:

答案 0 :(得分:45)

快速答案可能是:

  

<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: '='},因为该指令将继承其周围的范围,但它是将控制器变量显式传递(实际绑定)到指令的更简洁方法。 / p>

答案 1 :(得分:2)

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

这应该有效

^^^请注意,这将 NOT 甚至开始工作,除非添加单引号(如@JHixson已经指出的那样),如下所示:

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

答案 2 :(得分:0)

只需你的脚本:

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