ASP.NET MVC部分视图中的AngularJS [英] AngularJS in ASP.NET MVC Partial View

问题描述

I am currently loading Partial View returned by MVC controller to a model dialog 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 expressions etc. and for some reason angular is not working in my partial view, but if i load this partial view in some other view without ajax call then it angular works properly.

Partial View Code: ~/Views/ArticleType/_Add

MVC Controller: ArticleTypeController

//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
                    });
            }
        }]);

common.js 

$(document).ready(function (e) {
    
    $(document).ajaxStart(function (e) {
        $("#loadingBar").modal('show');
    });
    $(document).ajaxStop(function(e) {
        $("#loadingBar").modal('hide');
    });
    $(document).ajaxComplete(function (e) {
        $("#loadingBar").modal('hide');
    });
    $(document).ajaxError(function (e) {
        $("#loadingBar").modal('hide');
    });
});

function ShowModal(content) {

    //var html = $complie(content)(scope);
    $("#modal .modal-dialog").html(content);
    $("#modal").modal("show");
}
function HideModal() {
    $("#modal .modal-dialog").html("");
    $("#modal").modal("hide");
}

图片： http://i.stack.imgur.com/Y0txl.png [ ^ ]

Image: http://i.stack.imgur.com/Y0txl.png[^]

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



Here is the download link to the solution files. : https://app.box.com/s/rxvrhwcdp75zo736k7u5

推荐答案

http.get电话。我的视图在模态对话框中正确渲染，但唯一的问题是我渲染的局部视图也使用角度表达式等，并且由于某种原因角度在我的局部视图中不起作用，但是如果我在其他一些中加载此局部视图查看没有ajax调用然后它角度正常工作。

部分查看代码：〜/ Views / ArticleType / _Add

MVC控制器：ArticleTypeController

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 expressions etc. and for some reason angular is not working in my partial view, but if i load this partial view in some other view without ajax call then it angular works properly. Partial View Code: ~/Views/ArticleType/_Add MVC Controller: ArticleTypeController

//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.

有效&&添加（模型） >
< div class = modal-body >
< div class = form-group >
< label for = ArticleType < span class =code-attribute> class = control-label > 文章类型< / label >
< span class =code-keyword>< input type = text 必需 ng-model = model.ArticleTypeName < span class =code-attribute> class = form-control id = ArticleType / >
< / div >
< / div >

< / form >
< div class = 模态页脚 >
< 按钮 type = button class = < span class =code-keyword> btn btn-default data-dismiss < span class =code-keyword> = modal > 关闭< / button >
< 按钮 类型 = 提交 class = btn btn-primary value = 添加 > 添加< / button > ;
{{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 >
< < span class =code-leadattribute> / div >

valid}} </div> </div>

Controller to load modal with the partial view.

MenuController.js

angular.module('myApp').controller('MenuController', [
        '

这篇关于ASP.NET MVC部分视图中的AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！