最初没有隐藏angular-ui模态

Question

I'm following this angular recipes page for adding a modal dialog to my ui. It suggests the following markup, which I've added to one of my views.

... html for my view is here ...
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
  <div class="modal-header">
      <h4>Modal Dialog</h4>
      ... etc, from the recipe doc
</div>

What I want to see is my view, plus an "Open Modal" button on the bottom and nothing else. What I see instead is the button and the content of the modal already visible on the page.

The very next words in the recipe doc are:

Note that even though we don't specify it explicitly the modal dialog is hidden initially via the modal attribute. The controller only handles the button click and the showModal value used by the modal attribute.

Why is my modal mark up initially visible on the page? I think I have installed angular-ui properly... in my index.html:

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

And in my app JS:

angular.module('MonteAdmin', [
    ...
    'ui.bootstrap',
    ...
  ])

Answer 1

That recipes page is likely out of date. At the time of the writing it might have been possible to pass a variable showModal to the modal directive to reveal or hide it. In your controller, you would have been able to show the modal by setting the scope variable showModal to true or false:

$scope.showModal = false;

$scope.open = function() {
  $scope.showModal = true;
}

The current version does not work that way. You will have much better experience if you read the official documentation for the library at Angular UI Bootstrap

If you are using the latest version of the library, the directive is no longer modal but uib-modal . In addition, you have a bit more work to do to implement your modal.

Modal markup should be in a script tag, with a type set to text/ng-template as per the official example:

<script type="text/ng-template" id="stackedModal.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
    </div>
    <div class="modal-body" id="modal-body-{{name}}">
        Having multiple modals open at once is probably bad UX but it's technically possible.
    </div>
</script>

To actually open the modal, your button click should trigger the following example function:

var modalInstance = $uibModal.open({
  animation: $ctrl.animationsEnabled,
  ariaLabelledBy: 'modal-title',
  ariaDescribedBy: 'modal-body',
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  controllerAs: '$ctrl',
  size: size,
  appendTo: parentElem,
  resolve: {
    items: function () {
      return $ctrl.items;
    }
  }
});

You must also define a controller for the modal, itself:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
  var $ctrl = this;
  $ctrl.items = items;
  $ctrl.selected = {
    item: $ctrl.items[0]
  };

  $ctrl.ok = function () {
    $uibModalInstance.close($ctrl.selected.item);
  };

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

All of this code is found on the official documentation for Angular UI Bootstrap