emms.directive('emmsSingleDatepicker', function() { return { restrict: 'AE', replace: false, templateUrl: 'directives/single-datepicker/single-datepicker.html', scope: { dateValue: '=ngModel' //逆向绑定输入框的值到父作用域的ng-model }, controller: function($scope, $filter) { $scope.dateOptions = { maxDate: new Date(2099, 12, 30) }; $scope.altInputFormats = ['yyyy-M!-d!']; $scope.open = function() { $scope.opened = true; }; $scope.transformDate = function() { $scope.dateValue = $filter('date')($scope.date, 'yyyy-MM-dd HH:mm:ss'); }; } } });
指令模板：uib-datepicker就在这
<div> <span> <input type="text" uib-datepicker-popup="{{'yyyy-MM-dd'}}" ng-model="date" is-open="opened" clear-text="清空" current-text="今天" ng-required="true" close-text="关闭" ng-change="transformDate()"/> <span> <button type="button" ng-click="open()"><i></i></button> </span> </span> </div>
调用：（别忘了引入指令的js文件）
<emms-single-datepicker ng-model="newAudit.annualDate"></emms-single-datepicker>
3. uib-tab标签页
直接在要使用的div或者容器内使用
<uib-tabset active="activeJustified" justified="true"> <uib-tab index="0" heading="汽车" th:include="vehicle/info/templates::car">汽车</uib-tab> <uib-tab index="1" heading="工作车" th:include="vehicle/info/templates::audit" select="toAudit()">工作车</uib-tab> <uib-tab index="2" heading="可用车辆" th:include="vehicle/info/templates::insurance" select="toInsurance()">可用车辆</uib-tab> </uib-tabset>
4. uib-modal 模态框
前台调用：
<a ng-click="openMaintenanceDetail(maintenance)">编辑</a>
打开模态框的函数
$scope.openVehicleDetail = function(vehicle) { // 弹出确认窗口 var modalInstance = $uibModal.open({ templateUrl: 'vehicle-detail.html', controller: 'VehicleDetailCtrl', animation: true, resolve: { vehicle: vehicle, allTypes: function() { return $scope.allTypes; } }, size: 'lg' }); // 更新页面内容 modalInstance.result.then(function(response) { refreshByCloseStatus(response, $scope.vehicles); }); }
模态框对应的controller
emms.controller('VehicleDeleteCtrl', ['$scope', '$uibModalInstance', , function($scope, $uibModalInstance) { $scope.confirm = function() { judgeDelete(flag, instance); $uibModalInstance.close("close"); } $scope.cancel = function() { $uibModalInstance.dismiss("cancel"); } }]);
模态框对应的html模板
<script type="text/ng-template"> <div> <div> <p>保险信息</p> </div> <div> <form> <div> <td><label for="vehicleType">保险车辆 <span>*</span></label> </td> <td> <select ng-model="insurance.vehicle" ng-options="vehicle as vehicle.vehicleIDNum for vehicle in allVehicles"> <option >请选择</option> </select> </td> </div> <div> <td><label for="">保险日期 <span>*</span></label></td> <td><input type="text" ng-model="insurance.date" placeholder="" /></td> </div> <div> <td><label for="">保险公司 <span>*</span></label></td> <td><input type="text" ng-model="insurance.companyName" placeholder="" /></td> </div> <div> <td><label for="">保险类型 <span>*</span></label></td> <td><input type="text" ng-model="insurance.type" placeholder="" /></td> </div> <div> <td><label for="">保险金额 <span>*</span></label></td> <td><input type="text" ng-model="insurance.money" placeholder="" /></td> </div> <div> <td><label for="">办理人 <span>*</span></label></td> <td><input type="text" ng-model="insurance.agent.staffName" placeholder="" /></td> </div> <div> <td><label for="">备注 <span>*</span></label></td> <td><input type="text" ng-model="insurance.remark" placeholder="" /></td> </div> <div> <td colspan=2> <button type="button" ng-click="cancel()">取消</button> <button type="submit" ng-click="commit(insurance)">提交</button> </td> </div> </form> </div> </div> </script>