How to open whole html page as modal? - angularjs

Question

I'm very new to angularjs and currently studying mean stack. I'm using this code to open an html page then getting the id of clicked user.
<a href="/edit/{{ person._id }}">
<button type="button" ng-show="management.editAccess" class="btn btn-primary">Edit</button>
</a>
But I want to open my html as a modal, I tried this method here http://plnkr.co/edit/Y7jDj2hORWmJ95c96qoG?p=preview but it doesn't show the html, Please help me on how to open my whole html as modal.

Answer 1

You need to $http.get the template in html and then using $sce render it.
<button data-toggle="modal" data-target="#theModal" ng-click="get()">get</button>
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
<div ng-bind-html="trustedHtml"></div>
</div>
</div>
</div>
JS:
$scope.get = function() {
$http({
method: 'GET',
url: 'Lab6.html',
})
.then(function successCallback(data){
$scope.data = data.data;
console.log($scope.data);
$scope.trustedHtml = $sce.trustAsHtml($scope.data);
},
function errorCallback(response){
console.log(response);
console.log('error');
});
}
Here is working plunker: http://plnkr.co/edit/SdCAep1dDH8UcpprwDH6?p=preview
Also I would argue that you should probably be using Angular UI Bootstrap to create your modal dialogs http://angular-ui.github.io/bootstrap/
Here is a cut down version of how to open a modal using Angular UI Bootrstrap:
$scope.open = function (vehicle) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
resolve: {
items: function () {
return $scope.items;
}
}
});
};