尝试使用AngularJS和UI Bootstrap

最开始我在搜索时想要一个日期选择器的日历,
然后找到了AngularJS和UI Bootstrap!
由于官方文档是英文的,样例也混合在一起,
所以这次我只会记录弹出式样例的笔记。

引入方式

AngularJS – 内核之一
npm install angular@1.4.8-rc.2
npm install angular-animate@1.4.8-rc.2
UI Bootstrap 软件库
npm install angular-ui-bootstrap
引导启动
npm install bootstrap

使用方式

这次我们在标签上显示了。
HTML的表现方式如下,我使用了Jade。

doctype html
html(ng-app='angluer.bootstrap')
 head
   title= title
   link(rel='stylesheet', href='/javascripts/lib/bootstrap/dist/css/bootstrap.min.css')
   script(src='/javascripts/lib/angular/angular.min.js')
   script(src='/javascripts/lib/angular-animate/angular-animate.min.js')
   script(src='/javascripts/lib/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js')
   script(src='/javascripts/script.js')
 body
  div.form-group(ng-controller='Datepicker as dt')
    h3.control-label 誕生日検索:{{dt.date | date : 'yyyy/MM/dd'}}
     i.glyphicon.glyphicon-calendar(uib-datepicker-popup ng-model="dt.date" is-open="dt.popup.opened" min-date="dt.minDate" max-date="dt.maxDate" datepicker-options="dt.dateOptions" ng-required="true" close-text="Close" ng-click="dt.open()")
  hr

控制器的内容如下所示。

var angboot = angular.module('angluer.bootstrap', ['ngAnimate', 'ui.bootstrap']);

angboot.controller('Datepicker', function () {
        this.date = new Date(); //デフォルト日付
        this.maxDate = new Date(2100,12, 31); //最大日付
        this.minDate = new Date(1900,1,1); //最小日付
        this.format = 'yyyy/MM/dd' //日付フォーマット

        this.popup = {
            opened: false
        };

        this.dateOptions = {
            formatYear: 'yyyy', //カレンダーの年の表示フォーマット
            startingDay: 1 //カレンダー初期日付
        };

        this.open = function() {
            this.popup.opened = true;
        };

});

在var angboot = angular.module(‘angluer.bootstrap’, [‘ngAnimate’, ‘ui.bootstrap’]);这一行中,被卡住的地方是确保导入的模块名称’ui.bootstrap’与脚本内部的名称匹配,如果不匹配,就会导致脚本无法正常运行。

失敗例:

變數angboot = angular.module(‘ui.bootstrap’, [‘ngAnimate’, ‘ui.bootstrap’]);

暂时而言,我已经确认上述代码在最新的angular.js中可以运行。

广告
将在 10 秒后关闭
bannerAds