Question

目前我有一个使用C# MVC5 and jQuery的应用。我希望慢慢移动它的一部分来使用AngularJs。

我有一些jQuery通过.load方法加载一个Html元素。我想做的是在这个加载的HTML中放置一个angularjs应用程序。这个html可能位于页面的几个位置，因为我们有许多动态加载到它上面的标签。

这可能吗？

更新

将angularjs文件添加到应用程序中，它们将被包含在内精细。
添加了一个基本的角度应用程序＆amp;控制器到项目和这被包括在内
我添加了一个数据-ng-app＆amp; data-ng-controller to 2 divs

＆LT; div data-ng-app =＆＃34; testApp＆＃34; ＆GT; ＆LT; div data-ng-controller =＆＃34; testCtrl as test＆＃34; ＆GT; {{test.title}} ＆LT; / div＆gt; ＆LT; / div＆gt;

但是，testCtrl为not getting used且约会控制器保留在div中，而{{}}未被文本替换。知道我做错了吗？

刚刚创建了一个展示正在发生的事情的示例应用

Sample App

Plunker example

Answer 1

我认为问题在于，当您通过jQuery加载HTML时，angular.js会在看到任何ng-app，ng-controller attrs之前被加载。

您可能尝试的是在加载HTML后手动引导AngularJS。

将此添加到jQuery HTML loading的回调中：

angular.element(document).ready(function() {
  angular.bootstrap(document, ['testApp']);
});

请参阅：

https://docs.angularjs.org/guide/bootstrap

Answer 2

您只需要在MVC5应用程序中包含角度脚本，并使用适当的指令来引导角度应用程序。然后，在您通过.load加载的html中，您希望通过角度控制，通过角度应用程序或ng-controller中的指令开始添加您的功能。

修改

由于您只能为每个文档引导一个角度应用程序，因此我建议您将ng-app指令放在MVC应用程序的html或body标签上。根据其他一些答案，这将允许您的角度应用程序立即自动引导。你可以做的另一种方法是用你喜欢的div包装MVC应用程序的部分：

 <div ng-app="testApp">  </div>

这将允许角度立即引导你的应用程序。

Answer 3

是的，您可以使用不同的角度控制器和模板在页面上显示内容。你甚至不需要JQuery加载，你可以使用angular。

Answer 4

我认为你没有发起Angular应用程序。

试试这个。

var  Project = angular.module('testApp',[]);

Project.controller('testCtrl',["$scope",function($scope){
  $scope.title == "your title";

}]);

并像这样更改你的HTML

< div data-ng-app="testApp" >
 < div data-ng-controller="testCtrl" > {{title}} < /div > 
< /div >

AngularJs＆amp; jQuery加载了htmls

更新

4 个答案: