AngularJS Bootstrap Modal $ modalInstance.dismissが関数ではありません

Question

私のモーダルでボタンをキャンセルすると、モーダルテンプレートのng-clickでバインドされた$ modalInstance.dismiss関数が機能しません。

コンソールにはエラーをスローされました：

MODALテンプレート "$ modalInstance.dismissは関数ではありません"：

<div class="my-modal ng-scope" id="my-modal"> 
    <div class="modal-header"> 
    <h3 class="modal-title" id="modal-title">Create a new room</h3> 
    </div> 
<div class="modal-body" id="modal-body"> 
    <form> 
    Enter a room name<br> 
    <input type="text" name="new-room-name"> 
    </form> 
    <div class="modal-footer"> 
    <button class="btn btn-warning" type="button" ng-click="modal.cancel()">Cancel</button> 
    <button class="btn btn-primary" type="button" ng-click="modal.save()">Create Room</button> 
    </div> 
</div> 

メインコントローラ：

(function() { 
    function HomeCtrl(Room, $scope, $uibModal, $log, $document) { 
var home = this; 

home.chatRooms = Room.all; 
//TO TEST ADD METHOD FROM ROOM.JS 
// this.addRoom = Room.add(); 

home.open = function() { 
    modalInstance = $uibModal.open({ 
    animation: true, 
    backdrop: true, 
    templateUrl: '../templates/modal.html', 
    controller: 'ModalInstanceCtrl', 
    controllerAs: 'modal', 
    bindToContoller: true, 
    scope: $scope, 
    size: 'lg', 
    resolve: { 
     '$modalInstance': function() { return function() { return modalInstance; } } 
    } 
    }); 


console.log(modalInstance); 

modalInstance.result.then(function (newChatRoom) { 
    home.selected = newChatRoom; 
    console.log(newChatRoom); 
}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
}); 
    }; 
} 

    angular 
    .module('blocChat') 
    controller('HomeCtrl', ['Room', '$scope', '$uibModal', '$log', '$document', HomeCtrl]); 
})(); 

モーダルコントローラ：

(function() { 
    function ModalInstanceCtrl(Room, $scope, $modalInstance, $log, $document) { 
var modal = this; 

this.save = function() { 
    $modalInstance.close(newChatRoom); 
}; 

this.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
}; 

    } 

    angular 
    .module('blocChat') 
    .controller('ModalInstanceCtrl', ['Room', '$scope', '$modalInstance', '$log', '$document', ModalInstanceCtrl]); 
})(); 

AngularJS BootstrapのUIドキュメント、いくつかのStackOverflowスレッド、およびその他のサイトを見て、私のコードで約3時間を費やしました。どんな助けもありがとう。

Answer 1

使用している角度uiブートストラップのバージョンでは、モーダルインスタンスへの参照は$uibModalInstanceと呼ばれています。コントローラをこれに変更してみてください：

(function() { 
    function ModalInstanceCtrl(Room, $scope, $uibModalInstance, $log, $document) 
    { 
    var modal = this; 

    this.save = function() { 
     $uibModalInstance.close(newChatRoom); 
    }; 

    this.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 
    } 

    angular 
    .module('blocChat') 
    .controller('ModalInstanceCtrl', ['Room', '$scope', '$uibModalInstance', '$log', '$document', ModalInstanceCtrl]); 
})();