0

当我单击模式上的取消按钮时，与模式模板上的 ng-click 绑定的 $modalInstance.dismiss 函数不起作用。

控制台一直在抛出错误：“$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]);
})();

我花了大约 3 个小时来处理我的代码，查看 AngularJS Bootstrap UI 文档、几个 StackOverflow 线程和其他站点，但没有得到任何结果。任何帮助，将不胜感激。

4

1 回答 1

2

在您使用的 angular ui bootstrap 版本中，对模态实例的引用称为$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]);
})();
于 2017-11-30T06:59:13.740 回答