ユーザーがボタンをクリックしたときにダイアログを開こうとしています。ダイアログ テンプレートにブートストラップ ドロップダウンを追加すると、最初のクリック ([ダイアログを開く] ボタンから) がすぐに返されることがわかりました。[ダイアログを開く] ボタンを 2 回 (3 回目、4 回目、...) クリックすると、すべてが期待どおりに機能します。
不足している初期化コードはありますか?
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');
});
};
}
スタイル.css
.modal-body {
height:200px;
}
問題を示すプランカーは次のとおりです。