AngularJS：外部模态模板

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

});

我需要向 app.js 添加什么才能使其能够在我的主 html 页面上将外部 html 文件显示为模式？

Answer 1

请仔细阅读文档here

你可以用 templateUrl 做这样的事情

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

Answer 2

我做了这个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

AngularJS：外部模态模板

AngularJS: External Modal Templates

twitter-bootstrap

angularjs

bootstrap-modal