Вставка строки шаблона углового js внутри элемента

Я пытаюсь поместить некоторую угловую строку шаблона js внутри элемента и ожидать результат с соблюдением. Но этого не происходит.

HTML

controller:

 function filterController($scope){ ... $scope.arr = ["APPLE", "BANANA"]; $scope.fruitsView = '

{{each}}

'; }

Вывод – это просто {{each}} .

Итак, как мне вставить строку углового js-шаблона (здесь $scope.fruitsView ) внутри элемента?

Я сделал для этого скрипку .

В этом случае вы не хотите просто «вставлять HTML», а компилировать его. Вы можете создать узлы DOM, используя службу $compile .

 var tpl = $compile( '

{{each}}

' )( scope );

Как вы можете видеть, $compile возвращает функцию, которая принимает объект scope как параметр, по которому вычисляется код. Получаемый контент может быть вставлен в DOM с помощью element.append() , например.

Важное примечание . Но ни при каких обстоятельствах какой-либо код, связанный с DOM, не входит в ваш controller. Правильное место всегда является директивой. Этот код можно легко ввести в директиву, но мне интересно, почему вы программно вставляете HTML вообще.

Можете ли вы пролить свет здесь, чтобы я мог дать более конкретный ответ?

Обновить

Предполагая, что ваши данные поступают из службы:

 .factory( 'myDataService', function () { return function () { // obviously would be $http return [ "Apple", "Banana", "Orange" ]; }; }); 

И ваш шаблон поступает из службы

 .factory( 'myTplService', function () { return function () { // obviously would be $http return '

{{item}}

'; }; });

Затем вы создаете простую директиву, которая читает в предоставленном шаблоне, компилирует его и добавляет на дисплей:

 .directive( 'showData', function ( $compile ) { return { scope: true, link: function ( scope, element, attrs ) { var el; attrs.$observe( 'template', function ( tpl ) { if ( angular.isDefined( tpl ) ) { // compile the provided template against the current scope el = $compile( tpl )( scope ); // stupid way of emptying the element element.html(""); // add the template content element.append( el ); } }); } }; }); 

Тогда с вашего взгляда:

 

И в controllerе вы просто связываете это:

 .controller( 'MyCtrl', function ( $scope, myDataService, myTplService ) { $scope.showContent = function () { $scope.items = myDataService(); // <- should be communicated to directive better $scope.template = myTplService(); }; }); 

И все должно работать вместе!

PS: все это предполагает, что ваш шаблон поступает с сервера. Если это не так, то ваш шаблон должен находиться в директиве, что упрощает работу.

  • Angularjs обещает не привязываться к шаблону в 1.2
  • Как я могу сохранить новые строки в частичной части AngularJS?
  • угловой $ q, Как связать несколько обещаний внутри и после цикла
  • Угловая - разница между нетронутыми / грязными и коснутыми / нетронутыми
  • Как сделать работу фильтра orderby в массиве строк?
  • Как я могу запустить директиву после того, как dom закончил рендеринг?
  • Единичное тестирование Директива AngularJS с шаблономUrl
  • Обновление страницы дает «Страница не найдена»
  • вызов метода родительского controllerа из директивы в AngularJS
  • Как читать stream pdf в angularjs
  • Угловая директива, как добавить атрибут к элементу?
  • Давайте будем гением компьютера.