dongnaoben4456 2019-07-09 13:28
浏览 141
已采纳

在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.

  • 写回答

1条回答 默认 最新

  • dtp19819 2019-07-13 04:12
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 微信小程序 用oss下载 aliyun-oss-sdk-6.18.0.min client报错
  • ¥15 ArcGIS批量裁剪
  • ¥15 labview程序设计
  • ¥15 为什么在配置Linux系统的时候执行脚本总是出现E: Failed to fetch http:L/cn.archive.ubuntu.com
  • ¥15 Cloudreve保存用户组存储空间大小时报错
  • ¥15 伪标签为什么不能作为弱监督语义分割的结果?
  • ¥15 编一个判断一个区间范围内的数字的个位数的立方和是否等于其本身的程序在输入第1组数据后卡住了(语言-c语言)
  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。
  • ¥15 抖音看过的视频,缓存在哪个文件