文/ NG-模板＆QUOT; NG-包括与脚本类型=＆QUOT工作; [英] ng-include not working with script type="text/ng-template"

问题描述

下面是我的Plunker：

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

在单击该按钮，下面应在插入之前的Hello World！跨度：

 ＆LT;脚本类型=文/ NG-模板ID =tempTest＆GT;
  ＆LT; D​​IV＆GT;
    ＆LT;跨度＆GT;正确插入LT＆; / SPAN＆GT;
  ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

减去脚本标签，当然。

我通过dunamicly插入下面的div实现这一点：

 ＆LT; D​​IV NG-包括=tempTest＆GT;＆LT; / DIV＆GT;
 

然后编译它。不过，如果你看一下日志，即编译后留下的唯一事情是这样的：

 ＆LT;  -  ngInclude：tempTest  - ＆GT;
 

这是怎么回事？为什么我插入正确编译？的逻辑如下：

  $ scope.insert =功能（）{
    //创建元素//
    VAR容器= angular.element（'＆LT; D​​IV ID =编译容器＆GT;＆LT; / DIV＆GT;'）;
    VAR元= angular.element（'＆LT; D​​IV NG-包括=tempTest＆GT;＆LT; / DIV＆GT;'）;    //插入父容器
    $（'＃问候'）前（集装箱）。    //插入元素
    $ animate.enter（元素，集装箱）;    //测试插入
    的console.log（编译之前：+ container.html（））    $编译（元）;    //编译之后再看看
    的console.log（编译后：+ container.html（））};
 

解决方案

在快速答案可能是：

  

＆LT; D​​IV NG-包括='tempTest'＆GT;＆LT; / DIV＆GT;

  也许你只是忘了单引号引用的模板。

在长答：

这是不建议访问控制器内的DOM - 你会遇到麻烦的code将与 $范围被淹没$适用（）呼叫。想想一个指令实现此功能。我试图创建从code在这里起点

http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3

  VAR应用= angular.module（'plunker'，['ngAnimate']）;app.directive（'问候'，函数（$编译）{
  返回{
    限制：'E'，
    范围： {
      名称：'='
    }，
    模板：'＆LT; D​​IV＆GT;'+
              '＆LT;跨度＆GT;您好{{名}}＆LT;！/ SPAN＆GT;'+
              '＆LT;按钮NG点击=插入（）＆GT;测试与LT; /按钮＆GT;'+
              '＆LT; / DIV＆GT;，
    链接：功能（范围，元素，ATTRS）{
       scope.insert =功能（）{
         VAR容器= angular.element（'＆LT; D​​IV NG-包括=\\'tempTest.html \\'＆GT;＆LT; / DIV＆GT;'）;
         element.before（$编译（容器）（范围））;
       }
    }
  }
}）app.controller（'MainCtrl'，函数（$范围）{
  $ scope.name ='世界';
}）;
 

 ＆LT;问候语名称=名字＆GT;＆LT; /问候＆GT;
 

模板元素的Hello World之前插入！ textnode每次单击该按钮。

边注您甚至不需要范围{名称：'='} 作为指令将继承其周边范围，但其更清洁的方式来传递（实际上绑定）控制变量指令明确。

Here is my Plunker:

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

When the button is clicked, the following should be inserted before the "Hello World!" span:

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

minus the script tags, of course.

I achieve this by dunamicly inserting the following div:

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

And then compiling it. However, if you look at the log, the only thing that is left after the compilation is this:

<!-- ngInclude: tempTest --> 

What is going on here? Why isn't my insert properly compiling? the logic is as follows:

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

};

解决方案

The quick answer might have been:

<div ng-include="'tempTest'"></div>
Probably you just forgot the single quotes to reference the template.

The long answer:

It is not advised to access the DOM inside a controller - you will get in trouble as the code will be flooded with $scope.$apply() calls. Think about implementing this feature with a directive. I tried to create a starting point from your code here

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>

The template elements are inserted before the Hello World! textnode everytime the button is clicked.

Side note You dont even need the scope{ name: '='} as the directive will inherit its surrounding scope, but its the cleaner way to pass (actually bind) controller variables to a directive explicitly.

这篇关于文/ NG-模板＆QUOT; NG-包括与脚本类型=＆QUOT工作;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！