Search code examples
javascriptangularjsangularjs-ng-includeng-viewangularjs-ng-route

Replace ngView HTML contents dynamically


I have an HTML page with a button which fires on click a request to an external service. This post request returns an HTML page.

Is it possible to replace the current ngView with this HTML content?

$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
    });
}

Solution

  • This StackOverflow Answer shows pretty well how to add an element to some HTML by grabbing the element that they want to add HTML to

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

    using angular.element then selecting the element and choosing append.

    what you want to do is more like removing the element that is there and then adding elements of your own.

    so grab the parent node, then parentNode.RemoveChild(elementYouWantGone) and then take that same parent node and then do a parentNode.append(variableHoldingHtmlYouWantThere)