angular自定义指令结合bootstrap ui框架
闲的蛋疼,花了半天时间搞了下博客,没啥好写的,就把最近项目中用到的angular折腾一番。 封装了常用的日期组件,以下是预览效果, 复制此HTML文件到本地 可以直接运行 所需要的js库都是在线引用的。 定义好指令后 使用的时候只需将此标签
<datepicker-popup formt='yyyy/MM/dd HH:mm:ss'></datepicker-popup>
这样一来,大功告成啦就!每个页面只要这个标签,就能引入头部导航了!
不过这种组件化的引入方式,我个人并不推荐使用在引入header和footer,因为这样的话,相当于每个页面都会加载一遍templat.html很影响速度,我建议,在引入datetimepicker这样的组件的时候在使用!因为这种小组件是按需加载的,用得着再加载,不会影响页面响应效率。下面是源码。可能有些地方不太规范,但是最终运行是没问题的。下面是源码直接复制即可运行,所需的JS库都是在线从CDN加载来的!
我的github地址: https://github.com/zhonglin728/zhonglin728.github.io.git
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-i18n/1.6.0-rc.1/angular-locale_zh-cn.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
.back{
font-family:myFirstFont;
background-color:#FC6907 }
</style>
<script>
var app = angular.module('bootApp',['ui.bootstrap']);
//已指令的形式加载time控件
app.directive('datepickerPopup',function (){
return {
restrict:'AE',
//templateUrl:'./tmp/datepicker.html',
template:angular.element(document.querySelector("#timeDiv")).html(),
scope: true,
controller:function ($scope,$element,$compile,$http,$attrs,$log){
var vm = $scope.$parent.vm;
//设置组件参数
$scope.dat = new Date();
$scope.format = $attrs.formt;
$scope.altInputFormats = ['yyyy/M!/d!'];
$scope.popup1 = {opened: false};
$scope.open1 = function (){
$element.bind('click',function(){ //根据项目的主题分格 颜色保持一致即可! 这里随便改了个颜色。默认应该是白色的!这里是黑科技修改,实际应用应该是修改源码CSS
$element.find("ul").addClass('back');
});
$scope.popup1.opened = true;
};
console.log("controller---");
},
compile:function (element,attributes){
return {
pre:function preLink(scope,element,attributes){
console.log("compile pre---");
},
post:function postLink(scope,element,attributes){
console.log("compile post---");
}
};
},
link:function (scope,element,attr){
console.log("link---");
}
}
});
</script>
</head>
<body ng-app="bootApp">
<!--<datepicker-popup formt='yyyy/MM/dd HH:mm:ss'></datepicker-popup>-->
<datepicker-popup formt='yyyy/MM/dd'></datepicker-popup>
<!--模版文件HTML-->
<div id="timeDiv" style="display:none;margin-left:400px;">{{name}}
<p class="form-group">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}"
ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="关闭"
clear-text="清空" current-text="今天" alt-input-formats="altInputFormats"/>
<button type="button" class="btn btn-info" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>{{dat}}
</div>
</p>
</div>
</body>
</html>