Angular和jQuery ng-include在document.ready中无法工作

Question

Angular和jQuery ng-include在document.ready中无法工作

javascriptjqueryangularjsdocument-readyangularjs-ng-include

9

我正在尝试使用HTML加载放置在单独HTML中的组件。问题在于它需要在页面在浏览器中加载后立即调用。

以下是我的Modal代码：

<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 没有被首先执行，因此模态框没有被加载。有什么解决办法吗？

谢谢，安基特

- Ankit Tanna

尝试使用 $(window).load(fn)。 - Jai

有一个 $includeContentLoaded 事件，但不幸的是文档记录得不是很好。你可能需要在附加到该事件的处理程序中启动 .modal()。 - Roamer-1888

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roamer-1888 · Accepted Answer

模态对话框需要在某个比 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>

< p >< em >请注意，< code >ng-include指令和< code >ng-controller指令一起工作，以实现在内容（由< code >src属性确定）加载完成后触发操作的目标。 < p >< strong >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映射。