Ng-include не работает с script type = "text/ng-template"

Вот мой плункер:

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

Когда кнопка нажата, перед "Hello World!" следует вставить следующее: продолжительность:

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

минус теги 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() )

};

Ответы

Ответ 1

Ответ быстрый мог быть:

<div ng-include="'tempTest'"></div>
Вероятно, вы просто забыли одинарные кавычки, чтобы ссылаться на шаблон.

Ответ long:

Не рекомендуется обращаться к 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: '='}, так как директива наследует его окружающий объем, но его более чистый способ передать (фактически привязать) переменные контроллера к директиве явно.

Ответ 2

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

Это должно работать

^^^ обратите внимание, что это будет NOT, даже начнет работать, если не будут добавлены одинарные кавычки (как уже указывал @JHixson), например:

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

Ответ 3

Просто script:

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