Question

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

我开始在应用程序中添加一些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"
    };
});

Answer 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引导应用程序。

将AngularJS洒入现有的jQuery繁重应用程序中

1 个答案: