将AngularJS应用到现有的jQuery应用程序中

我有一个用Grails2.2.0编写的jQuery应用程序。应用程序的很大一部分是一个单页应用程序，到目前为止，我基本上一直在做的是通过

$.load（）

将所需的HTML拉入

DIV

我开始在应用程序中添加一些AngularJS，因为我想我最终会用AngularJS取代大部分纯jQuery，但我遇到了一个问题

如果我在主布局文件中包含要拉入AngularJS的脚本标记，然后我想要在其上执行某些AngularJS功能的页面通过

$.load（）

拉入，那么AngularJS在某个点上似乎不会自举

但是，如果我将拉入AngularJS的脚本标记放在通过

$.load（）

拉入的HTML片段中，它就可以正常工作

关于AngularJS，有什么我还不太了解的原因吗？我使用的测试代码非常简单，可以在本文中查看

HTML：

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

---

我可以让你的JSFIDLE在这里工作：

以下是我修改的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引导应用程序

如果您使用的是$.load（），则需要手动引导应用程序-尝试讨论中的内容。继续获取TypeError:Object#没有“compile”方法。另外，那篇文章已经有2年了，我在angular文档中找不到该版本的compile（）。所以我想知道它是否还能用。看起来我现在需要的是bootstrap（）。只是想让它发挥作用。

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']);