Question

我正在使用UI引导来创建模态对话框。如果我使用＆＃34; templateUrl＆＃34;它可以正常工作并使用＆＃34; ng-template＆＃34;包含html模板。但由于我有多个模态对话框，在使用＆＃34; ng-template＆＃34;在页面中包含所有html模板后，我的页面变得越来越大。

这里是代码： HTML

<head>
  <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
  <script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
  <script data-require="ui-bootstrap@1.3.2" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <div ng-controller="myCtrl">
    <script type="text/ng-template" id="myContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        Modal body content goes here...
      </div>
      <div class="modal-footer">
        <button class="btn" type="button" ng-click="cancel()">Close</button>
      </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button>
  </div>

</body>
</html>

使用Javascript：

angular.module('mydemo', ['ngAnimate', 'ui.bootstrap']);
angular.module('mydemo').controller('myCtrl', function ($scope, $uibModal, $log) {

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      templateUrl: 'myContent.html',
      controller: 'ModalInstanceCtrl',
      size: size
    });
  };
});

angular.module('mydemo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

有什么方法可以直接使用HTML标记而不是使用＆＃34; templateUrl＆＃34;？或者至少可以通过这种方式将html模板保存在单独的文件中，而不是使用ng-template将其包含在页面中？以下是工作示例： http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview

Answer 1

是的，您有几个选项可以指示模态将加载的内容。

当@Wes在他的plunker fork中回答并演示时，您可以在应用程序的某处创建一个外部html文件，只要您指定文件的正确路径，该模式将按预期工作。
由于您已经使用了链接的plunker，您可以将模板放在脚本type="text/ng-template"标记内，并在模态配置中引用其id属性的值。

最后一种方法是在模态配置中内联html。 Here's your plunker forked with the html directly added to the template property of the modal config as a string.

var modalInstance = $uibModal.open({
  template: '<div class="modal-header">' +
              '<h3 class="modal-title">I\'m a modal!</h3>' +
            '</div>' +
            '<div class="modal-body">' +
              'Modal body content goes here...' +
            '</div>' +
            '<div class="modal-footer">' +
              '<button class="btn" type="button" ng-click="cancel()">Close</button>' +
            '</div>',
  controller: 'ModalInstanceCtrl',
  size: size
});

此方法工作正常，但根据模板中的标记量，编写，读取和维护可能有点麻烦。

Answer 2

您可以随时使用常规HTML。在这里更新了你的plnkr：

http://plnkr.co/edit/v0BYhg3ojCgy7eiebRvR?p=preview

这只需要您知道HTML文件的路径。

  <!DOCTYPE html>
<html ng-app="mydemo">

<head>
  <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
  <script data-require="angular-animate@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
  <script data-require="ui-bootstrap@1.3.2" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <div ng-controller="myCtrl">
    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button>
  </div>

</body>
</html>

和您的新myContent.html

<div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body">
    Modal body content goes here...
  </div>
  <div class="modal-footer">
    <button class="btn" type="button" ng-click="cancel()">Close</button>
  </div>

Answer 3

以下是使用$templateCache的另一个解决方案。

分叉的掠夺者在这里：http://plnkr.co/edit/ukqmThpvi4aRGLZEiSSe?p=preview

JS - templates.js

var app = angular.module('mydemo');

app.run(function($templateCache){

  $templateCache.put('tplcache/myContent.htm',
    '<div class="modal-header">' +
      '<h3 class="modal-title">I\'m a modal!</h3>' +
      '</div>' +
      '<div class="modal-body">' +
        'Modal body content goes here...' +
      '</div>' +
      '<div class="modal-footer">' +
        '<button class="btn" type="button" ng-click="cancel()">Close</button>' +
      '</div>');

})

JS - 模态配置

var modalInstance = $uibModal.open({
  templateUrl: 'tplcache/myContent.htm',
  controller: 'ModalInstanceCtrl',
  size: size
});

HTML脚本（主应用后包含templates.js）

  <script src="script.js"></script>
  <script src="templates.js"></script>

HTML正文

<body>
  <div ng-controller="myCtrl">
    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button>
  </div>
</body>

如何在UI引导模式中传递HTML标记

3 个答案: