草庐IT

javascript - Angular 和 jQuery ng-include with document.ready 不工作

coder 2024-07-15 原文

我正在尝试使用 HMTL 加载一个放置在单独 html 中的组件。问题在于它会在浏览器加载页面后立即调用。

下面是我的模态代码:

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

谢谢， 安 git

最佳答案

模态对话框肯定需要在 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>

请注意，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 映射。

关于javascript - Angular 和 jQuery ng-include with document.ready 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28624363/

javascriptng-include34gtltjqueryangularjsdocument-readyangularjs-ng-include

有关javascript - Angular 和 jQuery ng-include with document.ready 不工作的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  4. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  5. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  6. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  7. ruby - `rescue $!` 是如何工作的？ - 2

    我知道全局变量$!包含最新的异常对象，但我对下面的语法感到困惑。谁能帮助我理解以下语法？rescue$! 最佳答案 此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回，这很有用。a=get_me_datarescue$!在此行之后，a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的

  8. ruby - File.read ("| echo mystring") 是如何工作的？ - 2

    我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？ 最佳答案 来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro

  9. ruby - 这个 ruby​​ 注入(inject)魔术是如何工作的？ - 2

    我今天看到了一个ruby​​代码片段。[1,2,3,4,5,6,7].inject(:+)=>28[1,2,3,4,5,6,7].inject(:*)=>5040这里的注入(inject)和之前看到的完全不一样，比如[1,2,3,4,5,6,7].inject{|sum,x|sum+x}请解释一下它是如何工作的？ 最佳答案 没有魔法，符号(方法)只是可能的参数之一。这是来自文档:#enum.inject(initial,sym)=>obj#enum.inject(sym)=>obj#enum.inject(initial){|mem

  10. ruby-on-rails - attr_accessible 在 Rails 中如何工作？ - 2

    我刚刚有一个关于RubyonRails和模型(Rails3)中的attr_accessible属性的一般性问题。有人可以解释应该在那里定义哪些模型属性吗？我记得一些关于批量分配风险的事情，虽然我在这方面不太了解......谢谢:) 最佳答案 想象一个带有一些字段的订单类:Order.new({:type=>'Corn',:quantity=>6})现在假设订单也有折扣代码，比如:price_off。您不想将:price_off标记为attr_accessible。这会阻止恶意代码制作最终会执行如下操作的帖子:Order.new({:

随机推荐