首页 > 代码库 > angularJS的插件使用
angularJS的插件使用
$uibModal&&$uibModalInstance
$uibModal和$uibModalInstance是一款angularJS的弹窗控件,github地址 http://angular-ui.github.io/bootstrap/#/modal
$uibModal:负责调出弹窗
$uibModalInstance:弹窗实例
例子如下:
弹窗 template:
1 <script type="text/ng-template" id="detailWin"> 2 <div class="marketing-strategyList-win"> 3 <div class="modal-header"> 4 <h4 class="modal-title">{{modalTitle}}</h4> 5 <div class="btn-close" ng-click="closeModal()">×</div> 6 </div> 7 <div class="modal-body"> 8 <div class="cui-table"> 9 <table class="table table-bordered mb20"> 10 <thead class="table-header"> 11 <tr class="table-row"> 12 <th class="th-unit"><div class="th-countent">业务场景</div></th> 13 <th class="th-unit"><div class="th-countent">活动数</div></th> 14 15 </tr> 16 </thead> 17 <tbody class="table-body"> 18 <tr class="table-row" ng-repeat="$tr in tableData.strategyViewList"> 19 <td class="td-unit">{{$tr.sceneName | nullFilter:‘-‘}}</td> 20 <td class="td-unit">{{$tr.activeCount}}</td> 21 </tr> 22 </tbody> 23 </table> 24 </div> 25 <div class="btn-warp"> 26 <a class="btn cui-button cui-button-theme" ng-click="viewDetail()">查看详情</a> 27 </div> 28 </div> 29 </div> 30 </script>
调用弹窗controller
1 app.controller(‘marketing.strategyCtrl‘, [‘$scope‘, function($scope) { 2 3 $uibModal.open({ 4 animation: true, //弹窗toggle时是否有动画 5 template: $(‘#detailWin‘).html(), //弹窗模板 6 controller: ‘marketing.strategyCtrl.win‘, // 弹窗controller 7 size: ‘sm‘, //弹窗大小 sm、md、ld 8 resolve: { //数据交互 9 $postParams: function() { 10 return { 11 modalTitle: tag.name + act.name + "共计" + totalCount + ‘次‘, 12 data: d 13 }; 14 } 15 } 16 }).result.then(function(postData) { 17 var pieData =http://www.mamicode.com/ pieCenter.initPieData(postData); 18 pieCenter.renderPieView(pieData); 19 }); 20 }])
弹窗
1 app.controller(‘marketing.strategyCtrl.win‘, [‘$scope‘, ‘$postParams‘, ‘$uibModalInstance‘, 2 function($scope, $postParams, $uibModalInstance) { 3 $scope.modalTitle = $postParams.modalTitle; 4 $scope.tableData =http://www.mamicode.com/ $postParams.data; 5 window.tableData =http://www.mamicode.com/ $scope.tableData; 6 //关闭 7 $scope.closeModal = function() { 8 $uibModalInstance.dismiss(); 9 }; 10 //查看详情 11 $scope.viewDetail = function() { 12 //回调数据 13 $uibModalInstance.close({ 14 data: $scope.tableData, 15 title: $scope.modalTitle 16 }); 17 }; 18 } 19 ])
angularJS的插件使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。