如何使用角度中的bootstrap打开模态？

Question

我正在尝试创建一个简单的聊天室Web应用程序。我正在尝试将模态引导到角度以包括创建新的房间按钮。我按照documentation跟随示例代码，但是当我尝试运行它时，模态将无法打开。我错过了什么？这是模板和控制器。

＆＃13;

＆＃13;

(function() {
    function ModalCtrl($uibModal, Room) {
        //this.newRoom = Room.addRoom();
        
        $uibModal.open({
            templateUrl: 'app/templates/modal.html',
            controller: 'ModalCtrl as $modal'
        })
    }
    
    angular
        .module('blocChat')
        .controller('ModalCtrl', ['Room', ModalCtrl]);
})();

＆＃13;

<div class="modal-content">
    <div class="modal-header">
        <h3 class="modal-title">Create new room</h3>
    </div>
    <div class="modal-body">
        <p>modal body</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
</div>

<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试

(function() {
    function ModalCtrl($uibModal, Room) {
        //this.newRoom = Room.addRoom();

        $scope.open=function(){
          angular.element('#myModal').modal('show');

        };
    }

    angular
        .module('blocChat')
        .controller('ModalCtrl', ['Room', ModalCtrl]);
})();

<div id="myModal" class="modal-content">
    <div class="modal-header">
        <h3 class="modal-title">Create new room</h3>
    </div>
    <div class="modal-body">
        <p>modal body</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
</div>

<button class="btn btn-primary" ng-click="open()">New Room</button>

Answer 2

$uibModal依赖关系需要注入ModalCtrl控制器，如下所示：

angular
    .module('blocChat')        
    .controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);

，其中

function ModalCtrl($uibModal, Room) {
   //...
}

示例

＆＃13;

＆＃13;

(function () {
    function ModalCtrl($uibModal, Room) {
        var $modal = this;
        //this.newRoom = Room.addRoom();

        $modal.open = function () {
            $uibModal.open({
                templateUrl: 'app/templates/modal.html',
                controller: 'ModalCtrl as $modal'
            });
        };


    }

    angular
        .module('blocChat', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
        .factory('Room', function () {
            return {
                addRoom: function () {
                    console.log('add room');
                }
            };
        })
        .controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
})();

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app="blocChat" ng-controller="ModalCtrl as $modal">
    <script type="text/ng-template" id="app/templates/modal.html">
    <div class="modal-content">
       <div class="modal-header">
           <h3 class="modal-title">Create new room</h3>
       </div>
       <div class="modal-body">
          <p>modal body</p>
       </div>
       <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
       </div>
    </div>
</script>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>

</div>

＆＃13;

＆＃13;

＆＃13;