Question

我读过Agularjs - include external html file into modals，但它没有包含太多代码或解释，只是指向我读过的文档。所以，我会详细介绍。

我有一个SPA（单页面应用程序）的主html文件。我想使用模态来获得更详细的视图。

<html>
<head>
    <meta charset='utf-8'>
    <script src="js/angular.js"></script>
    <script src="js/angular-ui-bootstrap-modal.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">

<button class="btn" ng-click="open()">Open Modal</button>

<!-- want this to be in a separate html file -->

<div modal="showModal" close="cancel()">
    <div class="modal-header">
        <h4>Modal Dialog</h4>
    </div>
    <div class="modal-body">
        <p>Example paragraph with some text.</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
    </div>
</div>

<!-- -->

</body>
</html>

我的app.js文件：

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("MyCtrl", function($scope) {

  $scope.open = function() {
    $scope.showModal = true;
  };

  $scope.ok = function() {
    $scope.showModal = false;
  };

  $scope.cancel = function() {
    $scope.showModal = false;
  };

});

为了能够在我的主html页面上将外部html文件显示为模式，我需要添加到app.js？

Answer 1

我已经完成了 plnkr 以便更好地解释

打开专用html模板中定义的模式：

<强> 1。在负责打开模态的按钮的控制器中声明以下内容：

$modal.open({
  templateUrl: 'myModalTemplate.html',
  controller: 'MyModalController'
});

<强> 2。这是模态的控制器：

$scope.ok = function () {
    $modalInstance.close();
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

另请参阅 ui bootstrap doc

Answer 2

请仔细查看文档here

您可以使用templateUrl

执行类似的操作

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

AngularJS：外部模态模板

2 个答案: