Angular e jQuery ng-include con document.ready non funziona

Question

Sto provando a caricare un componente che viene inserito in un html separato usando HMTL. Il problema è che deve essere richiamato non appena la pagina viene caricata nel browser.

Qui di seguito è il mio codice modale:

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

Il codice componente è qui:

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> 

The Way I Am invocando il modale utilizzando JavaScript è:

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

Il problema è: se I non utilizzare ng-include funziona bene. Ma quando uso ng-include lo non funziona. Penso che ng-include non venga eseguito per primo e quindi il modale non venga caricato. c'è qualche soluzione a questo?

Grazie, Ankit

Answer 1

La finestra di dialogo modale sicuramente bisogno di essere avviati su qualche evento più tardi document.ready. È solo questione di decidere quale sia l'evento migliore.

window.load è l'evento più ovvio da provare ma non è un approccio particolarmente "angolare".

Il primo evento affidabile è il completamento del caricamento della finestra di dialogo div e Angular prevede questo con un evento $includeContentLoaded.

Per dimostrare il principio, ecco una demo con contenuto caricato da un modello locale e con del 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> 

Nota che le direttive ng-include e ng-controller lavorano in consorzio raggiungere l'obiettivo di innescare un'azione quando il contenuto (determinato dall'attributo src) ha caricato

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

C'è ancora del lavoro da fare anche se non molto. Il codice finale dovrebbe essere in gran parte una semplificazione di quanto sopra, in quanto non è necessario il modello locale o la mappa associata $rootScope.templates.