Question

我对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。

Answer 1

您需要使用HTML $http.get模板，然后使用$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');
            });
    }

这里的工作人员很勤奋：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;
      }
    }
  });

};

如何打开整个HTML页面作为模式？

1 个答案: