Как открыть всю HTML-страницу как модальную? - PullRequest
Новая
       5

Как открыть всю HTML-страницу как модальную?

0 голосов
/ 11 ноября 2018

Я очень плохо знаком с angularjs и сейчас изучаю средний стек. Я использую этот код, чтобы открыть HTML-страницу, а затем получить идентификатор пользователя, по которому щелкнули. 

<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 как модальный.

1 Ответ

0 голосов
/ 11 ноября 2018

Вам нужно $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');
            });
    }

Вот рабочий плункер: 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;
      }
    }
  });

};
...