我找到了这篇文章" Bootstrap alert message represented as modal, angular "非常有趣,因为我是angularjs的新手。试图理解指令如何在成功操作后调用警报,而不是默认情况下在文章示例中显示的点击?
我一直试图做我的更改,但我打破了代码
HTML
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DialogDemoCtrl">
<div class="row-fluid">
<button class="btn btn-success" ng-click="open2()" >success
<my-alert
bold-text-title="Done"
text-alert="Some content"
mode="success"
></my-alert>
</button>
</div>
</div>
</body>
</html>
JS
angular.module('plunker', ['ui.bootstrap'])
.directive('myAlert', function($modal,$log) {
return {
restrict: 'E',
scope: {
mode: '@',
boldTextTitle: '@',
textAlert : '@'
},
templateUrl:
'<div class="modal-body" style="padding:0px">'
+ ' <div class="alert alert-{{data.mode}}" style="margin-bottom:0px">'
+ ' <button type="button" class="close" data-ng-click="close()" >'
+ ' <span class="glyphicon glyphicon-remove-circle"></span>'
+ ' </button>'
+ ' <strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}'
+ ' </div>'
+ '</div>',
link: function(scope, elm, attrs) {
scope.data= {
mode:scope.mode || 'info',
boldTextTitle:scope.boldTextTitle || 'title',
textAlert:scope.textAlert || 'text'
}
var ModalInstanceCtrl = function ($scope, $modalInstance, data) {
console.log(data);
$scope.data = data;
$scope.close = function(){
$modalInstance.close($scope.data);
};
};
// elm.parent().bind("click", function(e){
// scope.open();
// });
scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
backdrop: true,
keyboard: true,
backdropClick: true,
size: 'lg',
resolve: {
data: function () {
return scope.data;
}
}
});
modalInstance.result.then(function (selectedItem) {
scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}
};
})
function DialogDemoCtrl($scope, $log, $modal){
$scope.open2 = function(){
console.log('DialogDemoCtrl - opened');
if(1 + 1 == 2){ //This is supposed to be true from a response value
//TODO OPEN HERE THE SUCCESS MODAL
//$scope.open();
}else{
//TODO OPEN HERE THE ERROR MODAL
}
}
}
答案 0 :(得分:0)
试试这个plunker示例,http://embed.plnkr.co/As959V/
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};