在 jquery.load 页面中使用 angularjs

Posted 2023-03-07

【中文标题】在 jquery.load 页面中使用 angularjs

【英文标题】：Using angularjs inside a jquery.load page

【发布时间】：2014-03-09 23:28:00

【问题描述】：

我正在编写一个 Web 应用程序来容纳多设备应用程序。我已经使用 nodejs、socket.io 和 express 构建了处理视图分布的框架。 该框架提供了一个控制视图和组更改的基本布局，并且使用 jQuery .load 调用将实际内容加载到 div 元素中。

在我的测试应用程序中，我正在尝试使用 AngularJS 实现 MVC 类型的架构，但 Angular 无法加载并且从 .load 函数加载时无法工作。

我搜索了这里的论坛并用 Google 搜索了很多，我发现的唯一其他帖子是：https://groups.google.com/forum/#!msg/angular/LufmNlNSxBM/c6rR7Ao1PPgJ

但是，我试图避免我的框架和 Angular 之间的耦合，有没有人知道使用 jQuery 的 .load 方法加载时加载 Angular 的方法？

（如果这个问题不符合 SO 规则，我深表歉意，这是我的第一篇文章。如果有任何模棱两可的地方，或者需要更改，我会这样做）

编辑：

Require.js 解决了这个问题，这是我的解决方案和代码：

(main.js) 用于配置 require 和添加依赖项（这可以扩展为包括所有需要的依赖项，我只是使用最小的来让它加载和运行 angular

require.config(
    paths: 
        angular: 'lib/angular/angular.min',
        jquery: 'lib/jquery-1.11.0.min',
        app: 'app',
    ,
    shim: 
        angular: 
            deps: ['jquery'],
            exports: 'angular'
        ,   
    
);

然后我创建了一个包含在我动态加载的页面中的脚本，如下所示： (加载Angular.js)

require([
      'angular',
      'app'
//      'services/services',
//      'controllers/controllers',
//      'directives/directives'
    ], function(angular) 
        angular.bootstrap(document, ['MyApp']);
    );

最终，注释的行将被使用，并且取消注释。

最后，这是我加载到页面上的代码，它只是使用 ng-model 并在文本框中显示数字。这纯粹用于测试目的。 (test.html)

<div id='unique' ng-app='MyApp'>
    <form action="">
        <input type="number" ng-model='number'>
        <br>
    </form>
    <h1>The number is currently number.</h1>
</div>

<script src = "/js/loadAngular.js"></script>

【问题讨论】：

请您提供一些代码吗？另外，尽量避免使用“它在 xx 时不起作用”之类的短语，它们不会告诉读者任何事情！ :) 对于网站的新手来说，这里有一些很棒的读物：***.com/help/asking

【参考方案1】：

使用Require.js来加载angular.js，你可以用它来控制加载到哪些视图上，哪些视图上不加载。请看下面的例子

http://www.codeproject.com/Articles/637430/Angular-js-example-application

【讨论】：

非常感谢，正是我想要的。我自己永远也不会发现！

@mem27 很高兴能提供帮助。祝你好运！！