Question

我使用angular-ui bootstrap为用户输入提供模态窗口。这是一些相关的代码

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)
    })

}

还有一个按钮，可以调用open()来呈现模态

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

我有以下窗口

这里有两个问题

模态窗口的边缘看起来不太好
没有用于显示和隐藏窗口的动画

Answer 1

边缘问题是因为css类错误model（应为modal）

动画是由角度动画版本引起的，运行bower update解决了它。

angular-bootstrap模态动画错误

1 个答案: