0

我正在使用angularJs，带有asp.net mvc4的twitter bootstrap。我没有使用角带。我正在尝试在引导模式中加载部分视图。局部视图包含角度代码。

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

@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>

对于 ng-model="sample"，当我尝试按 {{sample}} 显示数据时，它保持 {{sample}}。就像我的“创建”动作没有得到 angularJs。

我已经在“MasterPage.cshtml”中呈现了所有必要的脚本。我的 MasterPage.cshtml 包含：

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

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

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"
                    ));

我在做什么错？需要帮忙 ...

4

1 回答 1

0

添加到@Muctadir 所说的内容，您需要告诉 angular 检查您的模态部分是否有角度元素。您可以通过$compile在将部分注入 DOM 之前调用来做到这一点。问题是您必须能够访问该$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);
            });
        }
    };
});

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

于 2013-10-21T14:21:46.093 回答