twitter-bootstrap ASP.NET MVC 部分视图中的 AngularJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26046800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS in ASP.NET MVC Partial View
提问by user2539602
I am currently loading Partial View returned by MVC controller to a bootstrap model via AngularJS $http.get call. My View in rendered properly in modal dialog, but the only problem is that my partial view which is rendered also uses angular and for some reason angular is not working in my partial view, but if the i convert the same partial view to a normal view it works properly.
我目前正在通过 AngularJS $http.get 调用将 MVC 控制器返回的部分视图加载到引导模型。我的视图在模态对话框中正确呈现，但唯一的问题是我呈现的局部视图也使用了 angular 并且由于某种原因，angular 在我的局部视图中不起作用，但是如果我将相同的局部视图转换为普通视图它工作正常。
Partial View Code:
部分查看代码：
@{
ViewBag.Title = "Add Article Types";
}
//other scripts files e.g app.js and angular.js are included in main layout file.
<script src="~/Scripts/Angular/ArticleTypeController.js"></script>
<div class="modal-content" ng-controller="ArticleTypeController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
Add New Article Type
</div>
<form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid && Add(model)">
<div class="modal-body">
<div class="form-group">
<label for="ArticleType" class="control-label">Article Type</label>
<input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" />
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="Add" >Add</button>
{{ArticleTypeForm.$valid}}
</div>
</div>
Controller to load modal with the partial view.
使用局部视图加载模态的控制器。
MenuController.js
菜单控制器.js
angular.module('myApp').controller('MenuController', [
'$scope', '$http', 'httpPreConfig', function ($scope, $http, httpPreConfig) {
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")//returns the partial view.
.success(function (response) {
ShowModal(response);//it properly shows the modal. but angular doesn't work
});
}
}]);
As you can see from the image below that angular expression is not being evaluated.
正如您从下图中看到的那样，角度表达式没有被计算。
Any help would be really appreciated. Just so that you know, angular expressions etc. are working in normal views.
任何帮助将非常感激。只是为了让您知道，角度表达式等在普通视图中工作。
回答by Micha? Dudak
Perhaps the view you're returning is not compiled by Angular. Try compiling it before displaying it in the modal by the $compileservice and linking to a correct scope:
也许您返回的视图不是由 Angular 编译的。在$compile服务的模式中显示它之前尝试编译它并链接到正确的范围：
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")
.success(function (response) {
$compile(response)($scope);
ShowModal(response);
});
}
But actually, this is not the right thing to do in the Angular world. IMO it would be better to use ng-includeto load your content inside the modal and then show it to the user.
但实际上，这在 Angular 世界中并不是正确的做法。IMO 最好使用ng-include在模态中加载您的内容，然后将其显示给用户。
