时间戳

首页 > 解决方案 > 如何以模态方式打开整个html页面？

angularjs - 如何以模态方式打开整个html页面？

问题描述

我对 angularjs 很陌生，目前正在研究平均堆栈。我正在使用此代码打开一个 html 页面，然后获取点击用户的 id。

<a href="/edit/{{ person._id }}">
<button type="button" ng-show="management.editAccess" class="btn btn-primary">Edit</button>
</a>

但我想将我的 html 作为模态打开，我在这里尝试了这个方法http://plnkr.co/edit/Y7jDj2hORWmJ95c96qoG?p=preview但它没有显示 html，请帮助我如何打开我的整个 html作为模态。

标签： angularjsmean-stack

解决方案

您需要$http.get在 html 中的模板，然后使用$sce渲染它。

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

这是工作 plunker：http ://plnkr.co/edit/SdCAep1dDH8UcpprwDH6?p=preview

另外我认为您可能应该使用 Angular UI Bootstrap 来创建模态对话框http://angular-ui.github.io/bootstrap/

以下是如何使用 Angular UI Bootrstrap 打开模式的精简版：

$scope.open = function (vehicle) {

  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });

};

推荐阅读