个人中心
gpt4 book ai didi

javascript - Angular 和 jQuery ng-include with document.ready 不工作

转载 作者：数据小太阳 更新时间：2023-10-29 03:50:37 25 4
gpt4 key购买 nike

我正在尝试使用 HMTL 加载一个放置在单独 html 中的组件。问题在于它会在浏览器加载页面后立即调用。

下面是我的模态代码:

<div class="modal fade borderColorC0C0C0 borderRadiusOverride" id="termsAndConditionsPopover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" ng-include="'components/popover/termsAndConditions/termsAndConditions.html'">

</div>

组件代码在这里:

termsAndConditions.html

<div class="modal-dialog borderRadiusOverride">
    <div class="modal-content borderRadiusOverride">
      <div class="termsAndConditionsHeaderColor borderRadiusOverride divHeight50 paddingTop15 paddingLeft15 paddingBottom15 borderBottomColorC0C0C0">
        <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
        <h5 class="modal-title marginBottom15 fontColorTileSteps" id="myModalLabel">Cisco's GSA shipping Policy</h5>
      </div>
      <div class="modal-body borderRadiusOverride fontColorTileSteps">
        This policy outlines the requirements of shipping Internationally including but not limited to:
<ul>
    <li>All members of the Cisco workforce are responsible to adhere to this policy</li>
    <li>AST is to not be used for personal shipments</li>
    <li>Prohibited items</li>
    <li>Textiles</li>
    <li>Shipments to Trade shows, hotels, residential addresses</li>
    <li>Importer of record requirements</li>
    <li>Shipment of used equipment</li>
    <li>Other restrictions; including export requirements</li>
</ul>
<p>Fixed Assets shipping from one Cisco entity to another Cisco entity must transfer the value to the receiving entity. It is the responsibility of the person initiating the shipment to ensure this takes place. Please refer to the Asset Management System. AMS is used in US, India, China and Brazil. The asset tracking process will vary for the rest of the countries.</p>

<p><strong>PLEASE NOTE:</strong> The person initiating the shipment is responsible for the accuracy of all shipment information. Should fines be levied due to misinformation given by individual, all associated costs will be charged to your Department.</p>

<p>In International transactions governmental agencies have the power to request evidence to attest to the information given on commercial documentation, either at importation or in subsequent audits. International shipments may be subject to export and/or import licenses. The recipient of the international shipment may be required to obtain import licensing based on the destination country or address (business/residential) or the goods contained within the shipment.</p>
      </div>
      <div class="textAlignCenter borderRadiusOverride">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button> -->
        <button type="button" class="btn btn-primary buttonColor525252 termsAndConditionsButton marginTop10 marginBottom30 fontColorWhite" data-dismiss="modal">I have read and I comply with Cisco's GSA shipping Policy</button>
      </div>
    </div>
  </div>

我使用 JavaScript 调用模态的方式是:

$(document).ready(function(e) {
    $('#termsAndConditionsPopover').modal('show');
});

问题是:如果我不使用 ng-include 则可以正常工作。但是当我使用 ng-include 时，它不起作用。我认为 ng-include 没有首先执行，因此没有加载模态。有什么解决办法吗？

谢谢，安 git

最佳答案

模态对话框肯定需要在 document.ready 之后的某个事件上启动。这只是决定哪个是最好的事件的问题。

window.load 是最明显的尝试事件，但不是特别“有 Angular ”的方法。

最早的可靠事件是对话框 div 的加载完成，Angular 为此提供了一个 $includeContentLoaded 事件。

为了演示原理，这里有一个从本地模板加载内容并使用 jQueryUI 的 .dialog() 的演示:

HTML

<body ng-app="demo">
    <div ng-controller="AppController">
        <script type="text/ng-template" id="modal.html">
            <p>This is included text</p>
        </script>
        <div id="termsAndConditionsPopover" ng-include src="templates.modal" ng-controller="ModalCtrl"></div>
    </div>
</body>

请注意，ng-include 和 ng-controller 指令协同工作，以实现在内容(由src 属性)已加载

Javascript

var demo = angular.module('demo', []);

demo.controller('AppController', ['$rootScope', function ($rootScope) {
    $rootScope.templates = {
        modal: 'modal.html'
    };
}]);

demo.controller('ModalCtrl', ['$scope', function ($scope) {
    $scope.$on('$includeContentLoaded', function(event) {
        $('#termsAndConditionsPopover').dialog({ autoOpen: true });
    });
}]);

jsFiddle

还有一些工作要做，虽然不是很多。您的最终代码应该主要是上述代码的简化，因为您不需要本地模板或关联的 $rootScope.templates 映射。

关于javascript - Angular 和 jQuery ng-include with document.ready 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28624363/

25 4 0
文章推荐： javascript - 如何获得基于 Javascript 的图表库的渲染性能？
文章推荐： c# - 为什么 Main 方法是私有(private)的？
文章推荐： c# - 如何在 Global.aspx 的 Application_Start 中获取完整的主机名+端口号？
文章推荐： Javascript - 检索文件夹中文件的名称
数据小太阳
个人简介

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

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