Angular und jQuery ng-include mit document.ready funktioniert nicht

Question

Ich versuche, eine Komponente zu laden, die in einem separaten HTML mit HMTL platziert wird. Das Problem ist, dass es aufgerufen wird, sobald die Seite im Browser geladen ist.

Unten ist mein Modal-Code:

<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> 

Der Komponentencode ist hier:

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> 

Wie ich das modale am Aufruf mit Hilfe von JavaScript ist:

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

Das Problem ist: wenn ich verwende nicht ng-include das funktioniert gut. Aber wenn ich ng-include verwenden, funktioniert es nicht . Ich denke, dass ng-include nicht zuerst ausgeführt wird und daher das Modal nicht geladen wird. Gibt es dafür eine Lösung?

Danke, Ankit

Answer 1

Der modale Dialog muss auf jeden Fall auf einem späteren Ereignis als document.ready eingeleitet werden. Es ist nur eine Frage der Entscheidung, welches die beste Veranstaltung ist.

window.load ist das offensichtlichste Ereignis zu versuchen, aber ist nicht ein besonders "Angular" Ansatz.

Das früheste zuverlässige Ereignis wäre das Beenden des Ladens des Dialogfelds div, und Angular stellt dies mit einem $includeContentLoaded Ereignis bereit.

das Prinzip zu demonstrieren, ist hier eine Demo mit Inhalten aus einer lokalen Vorlage geladen und mit jQueryUI des .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> 

Beachten Sie, dass die ng-include und ng-controller Richtlinien im Konsortium zusammenarbeiten, um das Ziel erreichen, eine Aktion auszulösen, wenn der Inhalt (bestimmt durch das Attribut src) geladen wurde

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

Es gibt immer noch einige Arbeit ist aber nicht viel zu tun. Ihr endgültiger Code sollte weitgehend eine Vereinfachung der oben genannten sein, da Sie die lokale Vorlage oder die zugehörige $rootScope.templates Karte nicht benötigen.