Замените ngView содержимое HTML динамически

Question

У меня есть HTML-страница с кнопкой, которая запускается при нажатии запроса на внешнюю службу. Этот почтовый запрос возвращает HTML-страницу.

Возможно ли заменить текущий ngView на этот HTML-контент?

$scope.clickEvent = function() { 

    var url = '/external-service'; 
    var param = { someParameter: someValue }; 

    $http 
    .post(url, param) 
    .then(function (data) { // sucess 

     // replace ngView with the data contents (which is a HTML)  

    }, function (data) { 
     // error 
    }); 
} 

Answer 1

Этот StackOverflow Answer показывает довольно хорошо, как добавить элемент в какой-то HTML, захватывая элемент, который они хотят, чтобы добавить HTML в

var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>'; 
var temp = $compile(btnhtml)($scope); 
angular.element(document.getElementById('foo')).append(temp); 

с помощью angular.element затем выбрать элемент и выбрать добавить.

то, что вы хотите сделать, больше похоже на удаление элемента, который есть, а затем добавление ваших собственных элементов.

так захватить родительский узел, затем parentNode.RemoveChild(elementYouWantGone) , а затем взять тот же родительский узел, а затем сделать parentNode.append(variableHoldingHtmlYouWantThere)

Answer 2

ngBindHtml должен сделать трюк, не забудьте добавить ngSanitize к вашим зависимостям и $sce.trustAsHtml(value), чтобы вы выиграли У меня проблемы.

У вас может быть div с ng-bind-html, и ваше выражение привязано к нему.

Помните, что будьте осторожны с этим. Вредоносный код может исходить из ответа.

Пример:

<div ng-app="myApp"> 
    <div ng-controller="testCtrl"> 
    <div ng-bind-html="myNewHtml"></div> 
    </div> 
</div> 

$scope.clickEvent = function() { 

    var url = '/external-service'; 
    var param = { someParameter: someValue }; 

    $http 
     .post(url, param) 
     .then(function(data) { // sucess 
      $scope.myNewHtml = $sce.trustAsHtml(data.yourHtmlObject); 
      // replace ngView with the data contents (which is a HTML)  

     }, function(data) { 
      // error 
     }); 
}; 

codepen пример не захватывая ответ HTTP, но вы можете реализовать его.

Codepen: http://codepen.io/anon/pen/KzKPNp