动态替换 ngView HTML 内容

Question

我有一个 HTML 页面，其中包含一个按钮，该按钮在单击对外部服务的请求时触发。此 post 请求 returns 一个 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

这个 Whosebug 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 should do the trick, don't forget to add 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响应，但是你可以实现。

代码笔：http://codepen.io/anon/pen/KzKPNp

动态替换 ngView HTML 内容

Replace ngView HTML contents dynamically

javascript

angularjs

angularjs-ng-include

ng-view

angularjs-ng-route