dongnaoben4456
dongnaoben4456
2019-07-09 13:28

在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 dtp19819 2年前

    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>
    点赞 评论 复制链接分享
提交

为你推荐