在引导模式中动态加载 angularjs 应用程序？答案

【问题标题】：Load angularjs app dynamically inside a bootstrap modal?在引导模式中动态加载 angularjs 应用程序？
【发布时间】：2019-11-19 01:53:00
【问题描述】：

我有一个页面，index.blade.php。（没有 angularjs）

<body>
    <table>
        <!-- If i click on a row, I store its id in a global variable (selected_id), 
              then I can click on show_edit_modal to view its details -->
        <tr></tr> 
        <tr></tr>
    </table>
    <button id="show_edit_modal">Show Modal</button>
    <div id="edit_modal">
      <!-- empty at first -->
    </div>
    $('#show_edit_modal').click(function(){
       // Fetch view
        $.ajax({
            type: 'GET',
            url: '/get_edit/' + selected_id,
            success: function(response) {
                $('#edit_modal').html(response);
            }
        }); 
    });
</body>

点击“添加”按钮 -> 它将显示一个模式。

点击后将发送一个 ajax 请求以获取要放置在该模式中的视图 (edit.blade.php)。不使用 iframe。该请求将返回一个视图/刀片文件。

在控制器中，ajax请求的接收者：

$data = Model::find($id);

return view('edit', compact('data'));

edit.blade.php

<div ng-app="itemsModule">
    <div ng-controller="editController">
        ...
    </div>
</div>
<script src="angular.min.js">
<script src="/controllers/edit.js">

获取的视图中有一个 angularjs 应用程序。 angularjs 库脚本、控制器脚本都加载到该视图中。

这可能吗？如果是这样，是否有标准的方法？还是我应该尝试重组？

我尝试运行它，它在第一次点击时就可以运行，但是当我点击不同的行并尝试编辑详细信息时，我收到一条警告，提示我尝试多次加载 angularjs。

【问题讨论】：

将 angular.min.js 添加到您的索引，而不是编辑刀片。
@aynber 我会把它放在哪里？
索引中不会被覆盖的任何地方，您放置其余 javascript 的地方。这里的关键是只加载一次 angularjs。在您引用它之前不会使用它。

标签： javascript php jquery angularjs laravel

【解决方案1】：

我可以使用AngularJS manual bootstrapping 解决这个问题。

我将angular.min.js 移至我的index.blade.php。

然后，在我的edit.blade.php：

<div id="helloApp">
    I am an angular app
    <div ng-controller="editController">
        Mighty controller
        <span ng-cloak>@{{message}}</span>
    </div>
</div>
<script>
    var ang = angular.module('itemsModule', []);
    ang.controller('editController', function($scope, $http){
        console.log('init edit controller');
        $scope.message = 'hello';
    });

    angular.element(function() {
        angular.bootstrap(document.getElementById('helloApp'), ['itemsModule']);
      });
</script>

【讨论】：