个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 14:34:02 25 4
gpt4 key购买 nike

我正在使用 UI Bootstrap 来创建模式对话框。如果我使用“templateUrl”并使用“ng-template”来包含 html 模板，它就可以正常工作。但由于我有多个模式对话框，使用“ng-template”在页面中包含所有 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

最佳答案

是的，您有几个选项来指示模式将加载哪些内容。

  1. 正如 @Wes 在他的 plunker fork 中回答和演示的那样，您可以在应用程序中的某个位置创建一个外部 html 文件，只要指定文件的正确路径，模式就会按预期工作。
  2. 由于您已经使用了链接到的 plunker，因此您可以将模板放入脚本 type="text/ng-template" 标记中，并引用其 id 的值模式配置中的 属性。

  3. 最后一种方法是将 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
    });

此方法工作得很好，但编写、读取和维护可能有点麻烦，具体取决于模板中标记的数量。

关于javascript - 如何在 UI 引导模式中传递 HTML 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37603057/

25 4 0
文章推荐： javascript - Node.js Express 网站实时更新数据
文章推荐： java - Java 6SE中ArrayList的增长策略
文章推荐： android - Flutter:Firebase:PlatformException(sign_in_failed，com.google.android.gms.common.api.ApiException:10:，null)
文章推荐： javascript - super 表达式必须为 null 或函数react-native 和 Realm DB
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com