角引导模态动画错误

Question

I use angular-ui bootstrap to present a modal window for user input. Here are some related code

app_list_create_modal.html

<div>
  <div class="model-header">
    <h3 class="model-title">model's title</h3>
  </div>
  <div class="model-body">

    <div class="my-form-group">
      <select ng-model="app.store" ng-options="option.value as option.display for option in storeOptions" class="my-form-control"></select>
    </div>

    <div class="my-form-group">
      <label for="create_store_id">App ID: </label>
      <input ng-model="app.storeId" id="create_store_id" placeholder="Enter app id" class="my-form-control">
    </div>

  </div>

  <div class="model-footer">
    <button class="my-button" type="button" ng-click="ok()">OK</button>
    <button class="my-button" type="button" ng-click="cancel()">Cancel</button>
  </div>
</div>

custom_directive.js

var app = angular.module('custom_directive', [
    'custom_service'
    ,'summernote'
    ,'ngSanitize'
    ,'ngAnimate'
    ,'ui.bootstrap'
]);

app_list_tag.js (angular custom directive)

var app = angular.module('custom_directive')

app.directive('appListTag', [function() {

//... following part inside controller of directive

$scope.open = function() {

    var modalInstance = $modal.open({animation: true, templateUrl: '/public/article/directive/app_list_create_modal.html',
        controller: ['$scope', '$modalInstance', function($scope, $modalInstance) {
            $scope.app = {}
            $scope.storeOptions = constant.selectOptions.storeTypes

            $scope.$watch('app', function(newValue, oldValue) {
                if (newValue) {
                    newValue.store = newValue.store || $scope.storeOptions[0].value
                }
            }, true)

            $scope.ok = function() {
                $modalInstance.close($scope.app)
            }
            $scope.cancel = function() {
                $modalInstance.dismiss()
            }
        }]
    })

    //Modal callback to create app
    modalInstance.result.then(function(app) {
        for (var i = 0; i < $scope.entities.length; i++) {
            if (angular.equals($scope.entities[i], app)) {
                //Note: prevent the same id, ui-select requirement
                helper.emitMessage($scope, helper.dataAppendedWithMessage({}, 'error', 'this app already exist'))
                return
            }
        }
        $scope.entities.push(app)
    })

}

And a button to call open() to present modal

<button type="button" class="btn btn-default" ng-click="open()">Add App</button>

I got the following window

There are 2 problems here

1. edge of the modal window does not look good

2. no animation for showing and hiding the window

Answer 1

The edge problem is because the css class typo model (should be modal )

The animation is due to angular-animate version, running bower update solves it.