angularjs – 表示为模态,角度的Bootstrap警报消息
发布时间:2020-12-17 06:55:33 所属栏目:安全 来源:网络整理
导读:Bootstrap 3提供 Bootstrap: event messages:成功,信息,警告,危险. 但是,有时视图没有足够的空间来显示事件消息. 有没有简单的方法在Angular中用modal包装事件? 这是我开始玩的template 解决方法 我会回答我自己的问题. 简单的方法 流程非常简单明了.我们
Bootstrap 3提供
Bootstrap: event messages:成功,信息,警告,危险.
但是,有时视图没有足够的空间来显示事件消息. 有没有简单的方法在Angular中用modal包装事件? 这是我开始玩的template 解决方法
我会回答我自己的问题.
简单的方法 流程非常简单明了.我们不在这里重新发明轮子. 我们既不需要也不需要标题: 对话框模板HTML: <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> 我们甚至不需要使用ng-class: class="alert-{{data.mode}}" 模式可能是:成功,危险 模态实例控制器: var ModalInstanceCtrl = function ($scope,$modalInstance,data) { $scope.data = data; $scope.close = function(/*result*/){ $modalInstance.close($scope.data); }; }; 这是模态配置和内容: $scope.data = { boldTextTitle: "Done",textAlert : "Some content",mode : 'info' } var modalInstance = $modal.open({ templateUrl: 'myModalContent.html',controller: ModalInstanceCtrl,backdrop: true,keyboard: true,backdropClick: true,size: 'lg',resolve: { data: function () { return $scope.data; } } }); 演示Plunker 指令方式 演示2 Plunker 我们可以将上述所有代码放入指令中以便更好地进行维护: HTML <button class="btn btn-success" ng-click="open()" >success <my-alert bold-text-title="Done" text-alert="Some content" mode="success" ></my-alert> </button> 指示 .directive('myAlert',function($modal,$log) { return { restrict: 'E',scope: { mode: '@',boldTextTitle: '@',textAlert : '@' },link: function(scope,elm,attrs) { scope.data= { mode:scope.mode,boldTextTitle:scope.boldTextTitle,textAlert:scope.textAlert } var ModalInstanceCtrl = function ($scope,data) { console.log(data); scope.data= { mode:scope.mode || 'info',boldTextTitle:scope.boldTextTitle || 'title',textAlert:scope.textAlert || 'text' } }; elm.parent().bind("click",function(e){ scope.open(); }); scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html',resolve: { data: function () { return scope.data; } } }); modalInstance.result.then(function (selectedItem) { scope.selected = selectedItem; },function () { $log.info('Modal dismissed at: ' + new Date()); }); } } }; }) 希望它能节省时间给某人. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |