动态替换 ngView HTML 内容

Question

我有一个带有按钮的 HTML 页面，该按钮会在单击外部服务的请求时触发。此发布请求返回一个 HTML 页面。

是否可以用这个 HTML 内容替换当前的 ngView？

$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)，这样您就不会遇到问题。

您可以有一个带有ng-bind-html 的 div 并将您的表达式绑定到它。

记住要小心。恶意代码可能来自响应。

例子：

<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