Question

我有一个页面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的警告。

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

在引导模态中动态加载angularjs应用吗？

1 个答案: