问答首页 悬赏问题 未解决 已解决 标签 专家问答 光荣榜 C币充值 我要提问 问答帮助
在bootstrap模式中动态加载angularjs app？

I have a page, index.blade.php. (no 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>

Click on “Add” button -> it will display a modal.

An ajax request will be sent on click to fetch the view (edit.blade.php) to be placed inside that modal. Not using an iframe. The request will return a view/blade file.

In the controller, receiver of ajax request:

$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">

That fetched view has an angularjs app in it. The angularjs library script, controller script, all loaded inside that view.

Is this possible? If so, is there a standard way of doing it? Or should I try restructuring?

I have tried to run this and it works on the first click, but when I click on a different row and try to edit the details, I get a warning about attempting to load angularjs more than once.

angularjs javascript laravel jquery php
dongtui6347
dongtui6347 索引中的任何位置都不会被覆盖，您可以放置​​其余的javascript。这里的关键是只加载angularjs一次。在您引用它之前不会使用它。
12 个月之前 回复
dsbgltg159136540
dsbgltg159136540 我会把它放在哪里？
12 个月之前 回复
doujia9204
doujia9204 将angular.min.js添加到索引，而不是编辑刀片。
12 个月之前 回复

1个回答

按赞数排序

I was able to solve this using AngularJS manual bootstrapping.

I moved the angular.min.js to my index.blade.php.

Then, in my 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>
Csdn user default icon
插入链接
本地上传 网络图片
上传中...
上传图片
插入图片
抄袭、复制答案，以达到刷声望分或其他目的的行为，在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了！
我要提问
立即提问
相关内容推荐