Angular 代码在引导模式下不起作用

Question

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

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

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

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

Answer 1

除了@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);
            });
        }
    };
});

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