Question

我正在尝试在用户点击按钮时打开对话框。我发现当我向对话框模板添加引导下拉列表时，第一次单击（从“打开对话框”按钮）立即返回。如果单击“打开对话框”按钮第二个（第三个，第四个......）时间，那么一切都按预期工作。

我是否缺少一些初始化代码？

HTML

<!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.6/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.3.0/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
   </head>

  <body ng-controller="MyController">
  <div class="container">
    <button ng-click="showDialog()">Open Dialog</button>
  </div>


  </body>    
</html>

的script.js

var app = angular.module('MyApp', ['ui.bootstrap']);

function DialogController($scope, $dialog){
  $scope.items = ["Item1", "Item2", "Item3","Item4"];

  $scope.close = function(){
    $dialog.close();
  };
} 

function MyController($scope, $dialog) {

  $scope.showDialog = function() {

      opts = {
        backdrop: true,
        backdropClick: true,
        template: '<div class="modal-body">' +
         '<div class="dropdown">' +
                '<a class="dropdown-toggle btn">'+
                'MyDropdown <span class="caret"></span>'+
                '</a>'+
                '<ul class="dropdown-menu">'+
                '<li ng-repeat="choice in items">'+
                '<a>{{choice}}</a>'+
                '</li>'+
                '</ul>'+
                '</div>' +
         '</div>',
        controller: DialogController
      };        
      var d = $dialog.dialog(opts);
      d.open().then(function(result){
        console.log('dialog closed');
      });        
  };

}

的style.css

.modal-body {
  height:200px;
}

这是一个说明问题的傻瓜：

http://plnkr.co/edit/lJy5l6vlLycP4VlSiObE?p=preview

当在模板中使用引导下拉列表时，角度对话框第一次立即关闭

0 个答案: