Angularに慣れておらず、モーダルを実装しようとしています。モーダルを閉じる/閉じるのに問題があります。キャンセルボタンをクリックしても何も起こりません。コントローラーコードは次のとおりです。
angular.module('navApp')
// Passing the $modal to controller as dependency
.controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.title = "Hello, Angm-Generator!";
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
};
}])
.controller('ModalCtrl', function ($scope, $uibModalInstance) {
// Added some content to Modal using $scope
$scope.content = "ModalCtrl, Yeah!"
// Add cancel button
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
これが実際のモーダルのテンプレートビューです
<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" datadismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Hello from Modal!</h3>
</div>
<div class="modal-body">
Modal Content from: <b>{{ content }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-danger" ngclick="cancel()">Cancel</button>
</div>
</script>
モーダルの右上にある十字をクリックしても、モーダルは閉じません。何か案は?ありがとう:)
$ uibModalInstance.close()を試しましたか?
あなたができるもう一つのことは
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
modalInstance.result.then(function successCallBack() {
modalInstance.close()
}, function errorCallBack() {
modalInstance.close()
})
};`
ngclickではなくng-click = "cancel()"にするべきではありませんか?
また、スコープがコントローラーにバインドされているとは思いません。これはテストしていませんが、さらにいくつかのオプションが必要だと思います。
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
controllerAs: '$mCtrl',
bindToController: true
});
そして、テンプレートを更新するだけです。
ng-click="$mCtrl.cancel()"