angular自定义指令结合bootstrap ui框架

最新推荐文章于 2024-07-29 00:15:00 发布

钟小懒

最新推荐文章于 2024-07-29 00:15:00 发布

阅读量1.2k

点赞数 2

分类专栏： angular 文章标签： bootstrap angular github ui

本文链接：https://blog.csdn.net/oDengYiGeQingTian12/article/details/53354827

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

钟小懒

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angular自定义指令结合bootstrap ui框架

angular自定义指令结合bootstrap ui框架***以下是预览效果，复制此HTML文件到本地可以直接运行所需要的js库都是在线引用的。定义好指令后使用的时候只需将此标签写在项目所需的地方即可！*** <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Typ
复制链接

扫一扫