Предоставление динамического содержимого HTML (содержимого углового) после вызова ajax в AngularJS

Я новичок в Angular, застряв после вызова ajax. Как визуализировать/скомпилировать html-контент после ввода в DOM, чтобы я мог использовать функции AngularJs.

Из-за того, как мой бэкэнд настроен, мне нужно получить контент через ajax ($ http). И я делаю приложение без jQuery. Я попробовал $compile и $apply, но не работал. Что мне здесь не хватает.

У меня есть код, установленный в http://jsfiddle.net/rexonms/RB7FQ/3/. Я хочу, чтобы второй контент div имел те же свойства, что и первый div.

HTML

<div ng-controller="MyCtrl" class="section">
  <input ng-model="contentA">
  <div>
      And the input is: {{contentA}}
  </div>
</div>

<div ng-controller="MyAjax" class="section">
  <div id="dumpAjax">
    {{ajaxData}}
  </div>
  <button ng-click=getajax()> Get Ajax</button>
</div>

SCRIPT

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

}

function MyAjax($scope){
  var data = '<input ng-model="contentB">{{contentB}}';

  $scope.getajax = function(){
    $scope.ajaxData = data;
  }

}

Спасибо заранее.

Ответы

Ответ 1

ng-bind-html-unsafe недоступен 1.2 и более поздняя версия angular...

поэтому вы должны использовать ng-bind-html, который создает привязку, которая будет innerHTML результатом оценки выражения в текущем элементе безопасным способом.

используя переменную $scope в вашей строке, делает ее небезопасной, поэтому вы должны использовать $sce.trustAsHtml, но в этом случае переменные в вашей строке не могут быть связаны, потому что они не будут скомпилированы...

в основном вы должны скомпилировать свою строку, чтобы привязать переменные. Ниже приведены пользовательские директивы, которые вы можете создать с помощью ng-html-bind...

Написание пользовательской директивы, которая расширяет ng-bind-html с помощью некоторых дополнительных функций, может быть решением...

вот мой PLUNKER

и вот ваш обновленный JSFIDDLE с моим решением...

Ответ 2

Вместо {{ajaxData}} вы должны использовать что-то вроде:

<div ng-bind-html-unsafe="ajaxData"></div>

Однако вам все равно нужно установить правильную модель для привязки contentB и заставить ее работать.