Asp.net mvc 4 角度代码在引导模式下不工作

我使用的是angularJs，twitter引导程序和asp.NETMVC4。我没有用有棱角的带子。我试图在引导模式中加载部分视图。局部视图包含角度代码

这是我调用引导模式的代码：

@model IEnumerable<IMS.Domain.Model.GetAllRequisitions_Result>

@{
    ViewBag.Title = "Requisition List";
    Layout = "~/Views/Shared/MasterPage.cshtml";
}

<a href="#myModal" role="button" class="btn btn-primary" id="modalluncher" data-toggle="modal" onclick="loadCreateForm()"> Launch demo modal </a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-body">
  </div>

</div>

<script type="text/javascript">
    function loadCreateForm() {
        var content = '@Url.Action("Create", "Requisition", new { area = "IMS" })';
        $('div.modal-body').load(content);
}
</script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div ng-app="">
    <label>Sample: <input type="text" ng-model="sample" /></label>
    <br />
    <label>Show Value: {{sample}}</label>
</div>

<div class="ContainerRowButton">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/others")

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/others").Include(
                    "~/Content/bootstrap/js/bootstrap.js",
                    "~/Scripts/jquery.dataTables.js",
                    "~/Scripts/dataTables_bootstrap.js",
                    "~/Scripts/bootstrap-dropdown.js",
                    "~/Scripts/jquery.dataTables.columnFilter.js",
                    "~/Scripts/Custom/CustomScript.js",
                    "~/Scripts/jquery.validationEngine-en.js",
                    "~/Scripts/jquery.validationEngine.js",
                    "~/Scripts/angular.js"
                    ));

下面是我的“Bundle.config.cs”文件的代码：

@model IEnumerable<IMS.Domain.Model.GetAllRequisitions_Result>

@{
    ViewBag.Title = "Requisition List";
    Layout = "~/Views/Shared/MasterPage.cshtml";
}

<a href="#myModal" role="button" class="btn btn-primary" id="modalluncher" data-toggle="modal" onclick="loadCreateForm()"> Launch demo modal </a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-body">
  </div>

</div>

<script type="text/javascript">
    function loadCreateForm() {
        var content = '@Url.Action("Create", "Requisition", new { area = "IMS" })';
        $('div.modal-body').load(content);
}
</script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div ng-app="">
    <label>Sample: <input type="text" ng-model="sample" /></label>
    <br />
    <label>Show Value: {{sample}}</label>
</div>

<div class="ContainerRowButton">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/others")

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/others").Include(
                    "~/Content/bootstrap/js/bootstrap.js",
                    "~/Scripts/jquery.dataTables.js",
                    "~/Scripts/dataTables_bootstrap.js",
                    "~/Scripts/bootstrap-dropdown.js",
                    "~/Scripts/jquery.dataTables.columnFilter.js",
                    "~/Scripts/Custom/CustomScript.js",
                    "~/Scripts/jquery.validationEngine-en.js",
                    "~/Scripts/jquery.validationEngine.js",
                    "~/Scripts/angular.js"
                    ));

---

我做错了什么？需要帮助…

除了@Muctadir所说的之外，您还需要告诉angular检查模态部分的角度元素。在将部分注入DOM之前，可以调用

$compile

。问题是，您必须能够访问

$compile

服务，而您不能在

loadCreateForm（）

中访问，您只能从角度模块中访问。因此，您需要以这样一种方式组织代码，以便能够获得所需的内容。以下是我的建议：

创建指令以处理模态及其内容：

.directive('myModal', function($compile){
    return {
        replace:false,
        link: function(scope, element, attrs){
            var content = '@Url.Action("Create", "Requisition", new { area = "IMS" })';
            elem.load(content, null, function(){
                $compile(elem.contents())(scope);
            });
        }
    };
});

---

这将加载内容，然后使用当前作用域编译内容，但仅在从服务器加载内容之后。希望对您有所帮助。

loadCreateForm（）的作用是什么？您是否使用ajax调用在部分中加载？您是在页面加载完成且模态html未绑定到$scope后注入模态html。您需要使用

$compile（html）（$scope）

编译您的html才能正常工作。您可以发布完整的代码吗？我遗漏了一些东西，我也有同样的问题&无法以任何方式让它工作。