如何使用 asp.net core mvc 在引导模式中加载 AngularJS 代码

Posted 2023-05-09

【中文标题】如何使用 asp.net core mvc 在引导模式中加载 AngularJS 代码

【英文标题】：how to load AngularJS code in bootstrap modal using asp.net core mvc

【发布时间】：2020-11-26 12:22:01

【问题描述】：

我想在引导模式中使用 AngularJS 代码我正在使用 Jquery 代码加载引导模式 在加载模态后，我想使用角度 JS 代码来获取和插入数据。角度代码在单独的视图中工作正常，但是当我尝试在模态中使用它时，我收到角度 js 警告 尝试在引导模式中多次加载角度。我怎样才能成功地让它工作。

这是我的代码

<script type="text/javascript">
    $(document).ready(function () 

        $('.className').on('click', function () 
            $.get('url',  id: id, mid: mid , function (data) 
                $('#detail').html(data);
                $('#modal').modal('show');
            );
        );
    );
</script>

在引导模式中我有以下代码

 @model Model
    
            <div class="modal-lg modal-dialog" role="document">
                <div class="modal-content panel panel-info">
                    <div class="modal-header panel-heading">
                        <a class="close" data-dismiss="modal">×</a>
                    </div>
                    <div ng-app="MyApp">
                        <div ng-controller="MyController">
                            <div class="modal-body panel-body">
                                <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
                                   //TO Show Data
                                </table>
    
     
                                <table border="0" cellpadding="0" cellspacing="0">
                                    //Form to insert data
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

var app = angular.module('MyApp', [])

    app.controller('MyController', function ($scope, $http, $window) 
        $scope.btntext = "Save";
      
        $scope.Savedata = function () 
           //For Saving
        

        $http.get("url").then(function (data) 
           //For fetching data
        );
</script>

我通过它加载模式的 html 控件位于另一个局部视图中 所以我在那个局部视图中有主视图，并且我正在加载模态，这也是一个局部视图。

谁能帮帮我

【问题讨论】：

这个警告是否影响数据显示或任何功能实现？尝试使用 F12 开发者工具检查 Console 面板是否有错误。此外，我还尝试在我的 .net core MVC 应用程序中创建一个视图页面，并将 Bootstrap Modal 放在部分视图中，并将 JavaScript 和 CSS 引用以及我的自定义 JavaScript 脚本放在主页上，然后一切正常。所以，我建议您可以发布足够的代码（包括主页和部分视图代码）来重现问题，如Minimal, Complete, and Verifiable example。

【参考方案1】：

我认为错误代码告诉您已经加载了角度-因此您可以在模态中使用它而无需再次加载 我猜你不止一处提到了 Angular 库

【讨论】：

但是在模态中添加角度代码后它没有给我预期的结果

据我了解，您能看到的唯一出乎意料的是“不止一次”警告，对吗？