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

动态替换ngView HTML内容

2 个答案: