AngularJS ASP。NET MVC局部视图

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.

我现在正在加载MVC控制器返回的部分视图，通过AngularJS $http返回bootstrap模型。得到调用。我认为正确地呈现在模态对话框,但唯一的问题是,我的部分视图呈现也使用角由于某种原因角不工作在我的部分视图,但是如果我相同的局部视图转换为一个正常的把它正常工作。

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

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. AngularJS ASP。NET MVC局部视图

从下面的图像中可以看出，角的表达式没有被求值。

Any help would be really appreciated. Just so that you know, angular expressions etc. are working in normal views.

任何帮助都是非常感谢的。就像你知道的那样，角的表达等都是在正常的视角下进行的。

1 个解决方案

#1

Perhaps the view you're returning is not compiled by Angular. Try compiling it before displaying it in the modal by the $compile service and linking to a correct scope:

也许你返回的视图不是由角度编辑的。尝试编译它，然后通过$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-include to load your content inside the modal and then show it to the user.

但实际上，在有角的世界里这不是正确的做法。在我看来，最好使用ng-include将内容加载到模式中，然后显示给用户。

#1