grails angularjs - 模态不按预期工作

Question

我想仅在用户点击鼓励按钮时显示模态（encouragementModal）。

配置

GSP查看_encourage.gsp是：

<div ng-controller="EncouragementController">
    <g:if test="${notEncouraged}">
                           <button class="btn" ng-click="openEncouragementModal()">Encourage</button>
                           <div modal="encouragementModal" close="closeEncouragementModal()" options="opts">
                            <div class="modal-header">
                                <h3>Encourage!</h3>
                            </div>
                            <div class="modal-body">
                                    You are about to encourage with {{amount}}.
                            </div>
                            <div class="modal-footer">
                               <button class="btn btn-info cancel" ng-click="encourage()">Confirm</button>
                                <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
                            </div>
                        </div>
                    </g:if>
                    <g:else>
                          Thank you for encouraging.
                    </g:else>

EncouragementController.js是

function EncouragementController($scope, $http) {
  /**
   * open payment dialog
   */
  $scope.openEncouragementModal = function (amount) {
        $scope.encouragementModal = true;
  };

  $scope.closeEncouragementModal = function () {
        $scope.closeMsg = 'You canceled the encouragement’;
        $scope.encouragementModal = false;
  };


  $scope.opts = {
        backdropFade: true,
        dialogFade:true
  };


}

EncouragementController.$inject = [ '$scope', '$http'];

问题

第一次只能看到鼓励按钮，但我看到的是按钮以及encouragementModal及其按钮。

那么，我该怎么做？

我参考的参考文献

[1] Modal (ui.bootstrap.modal)

[2] Simple Grails + AngularJS Example

Answer 1

您需要先隐藏它，并且只在scope.encouragement模态值为true时显示它。

<div modal="encouragementModal" ng-show="encouragementModal" options="opts">