Góc và jQuery ng-include với document.ready không hoạt động

Question

Tôi đang cố tải một thành phần được đặt trong một html riêng biệt bằng cách sử dụng HMTL. Vấn đề là nó sẽ được gọi ngay sau khi trang được tải trong trình duyệt.

Dưới đây là Mã phương thức của tôi:

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

Mã thành phần là ở đây:

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 đang gọi các phương thức sử dụng là JavaScript:

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

Vấn đề là: nếu tôi không sử dụng ng-bao gồm việc này hoạt động tốt. Nhưng khi tôi sử dụng ng-bao gồm nó không hoạt động. Tôi nghĩ rằng ng-include không được thực thi trước và do đó phương thức không được tải. Có giải pháp nào cho điều này không?

Cảm ơn, Ankit

Answer 1

Hộp thoại modal chắc chắn cần được thực hiện vào một số sự kiện muộn hơn document.ready. Nó chỉ là một câu hỏi quyết định đó là sự kiện tốt nhất.

window.load là sự kiện hiển nhiên nhất để thử nhưng không phải là cách tiếp cận đặc biệt "Góc cạnh".

Sự kiện đáng tin cậy sớm nhất sẽ là hoàn thành tải div hộp thoại và Angular cung cấp cho sự kiện này với sự kiện $includeContentLoaded.

Để chứng minh nguyên tắc, đây là một bản demo với nội dung nạp từ một mẫu địa phương và với jQueryUI của .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> 

Lưu ý rằng ng-include và ng-controller chỉ thị làm việc trong tập đoàn để đạt được mục tiêu kích hoạt hành động khi nội dung (được xác định bởi thuộc tính src) đã tải

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

Vẫn còn một số việc phải làm mặc dù không phải rất nhiều. Mã cuối cùng của bạn nên phần lớn là đơn giản hóa ở trên vì bạn không cần mẫu cục bộ hoặc bản đồ $rootScope.templates được liên kết.