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

Question

我正在使用UI引导程序创建模式对话框。 如果我使用“ templateUrl”并使用“ ng-template”包含html模板，则效果很好。 但是，由于我有多个模式对话框，因此在使用“ ng-template”将页面中的所有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标记而不是使用“ templateUrl”？ 还是至少可以将html模板保存在单独的文件中，而不是使用ng-template将其包含在页面中？ 这是工作示例： http : //plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview

Answer 1

是的，您有一些选项可以指示模式将加载的内容。

正如@Wes在他的pl子叉中回答并演示的那样，您可以在应用程序中的某个位置创建一个外部html文件，并且只要您指定文件的正确路径，该模式即可按预期工作。
当您已经处理了链接到的插件时，您可以将模板放在脚本type="text/ng-template"标签中，并在模态配置中引用其id属性的值。

最后一种方法是将html内联到模式配置中。 这是您的朋克派生者，带有直接作为字符串添加到模式配置的template属性中的html。

 var modalInstance = $uibModal.open({ template: '<div class="modal-header">' + '<h3 class="modal-title">I\\'ma 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 个解决方案

解决方案1
1 已采纳 2016-06-03 02:19:34

解决方案2
0 2016-06-02 22:31:41

解决方案3
0 2016-06-03 19:04:50

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-06-03 02:19:34

解决方案2 0 2016-06-02 22:31:41

解决方案3 0 2016-06-03 19:04:50

解决方案1
1 已采纳 2016-06-03 02:19:34

解决方案2
0 2016-06-02 22:31:41

解决方案3
0 2016-06-03 19:04:50