Angular и jQuery ng-include с document.ready не работают

Я пытаюсь загрузить компонент, который размещен в отдельном html, используя HMTL. Проблема в том, что он должен вызываться, как только страница загружается в браузере.

Ниже мой модальный код:

<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 не выполняется первым, и, следовательно, модальное окно не загружается. Есть ли какое-нибудь решение для этого?

Спасибо, Анкит.


javascript jquery angularjs document-ready angularjs-ng-include
person Ankit Tanna    schedule 20.02.2015    source источник
comment
попробуй с $(window).load(fn)   -  person Jai    schedule 20.02.2015
comment
Есть событие $includeContentLoaded, хотя, к сожалению, оно не очень хорошо задокументировано. Вероятно, вам нужно инициировать .modal() в обработчике, прикрепленном к этому событию.   -  person Roamer-1888    schedule 20.02.2015

Ответы (1)


arrow_upward
10
arrow_downward

Модальный диалог определенно должен быть инициирован в каком-то более позднем событии, чем document.ready. Остается только решить, какое событие лучше.

window.load - это наиболее очевидное событие, которое стоит попробовать, но это не особенно "угловой" подход.

Самым ранним надежным событием будет завершение загрузки диалогового окна div, и Angular предоставляет для этого событие $includeContentLoaded.

Чтобы продемонстрировать принцип, вот демонстрация с содержимым, загруженным из локального шаблона и с .dialog() jQueryUI:

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.

person Roamer-1888    schedule 20.02.2015
comment
Отлично, рад помочь. - person Roamer-1888; 21.02.2015