将 AngularJS 洒在现有的 jQuery 繁重的应用程序中答案

【问题标题】：Sprinkling in AngularJS into existing jQuery heavy application将 AngularJS 洒在现有的 jQuery 繁重的应用程序中
【发布时间】：2013-05-08 03:15:07
【问题描述】：

我有一个用 Grails 2.2.0 编写的 jQuery 繁重的应用程序。该应用程序的很大一部分是单页应用程序，到目前为止我基本上一直在做的是将所需的 HTML 通过$.load() 拉入DIV。

我开始向应用程序添加一些 AngularJS，因为我想我最终想用 AngularJS 替换大部分纯 jQuery，但我遇到了一个问题。

如果我在主布局文件中包含用于拉入 AngularJS 的脚本标记，然后在某些时候通过$.load() 拉入我想要执行某些 AngularJS 功能的页面，AngularJS 似乎不会自行引导。

但是，如果我将拉入 AngularJS 的脚本标签放在通过$.load() 拉入的 HTML 片段中，它可以正常工作。

我对 AngularJS 还不太了解的原因是什么？我使用的测试代码比较简单，可以在这个jsFiddle查看。

HTML：

<div ng-app="attributeApp">
    <div ng-controller="AttributeCtrl">
        <input type="text" ng-model="master.name" />
        <div>{{master.name}}</div>
    </div>
</div>

Javascript：

var app = angular.module("attributeApp", []);

app.controller("AttributeCtrl", function ($scope) {
    $scope.master = {
        name: "some name"
    };
});

【问题讨论】：

如果你使用 $.load() 你需要手动引导你的应用程序 - groups.google.com/d/msg/angular/LufmNlNSxBM/s0ygHJGaOQYJ
从那次讨论中尝试一些东西。不断收到 TypeError: Object #
另外，该帖子已有 2 年历史，我在 angular 文档中找不到该版本的 compile() 。所以我想知道它是否应该再工作了。
看起来 bootstrap() 是我现在需要的。只是想让它发挥作用。

标签： jquery grails angularjs

【解决方案1】：

我能让你的 jsFiddle 在这里工作：http://jsfiddle.net/sYPqn/

这是我为让您的引导方案工作而修改的 js：

angular.module("attributeApp", [])
.controller("AttributeCtrl", function ($scope) {
    $scope.master = {
        name: "some name"
    };
});

console.log("Angular: %j", angular);
console.log("ra: %j",  rootApp);    
angular.bootstrap(rootApp, ['attributeApp']);

我删除了 DOM 中的 ng-app="module" 部分，因为我认为这不是必需的，而且它也可能会造成混淆。我用一个命名的 div id 替换它，并根据元素的 id 引导应用程序。

【讨论】：