无法通过 AngularJS 中的指令传递 Fullcalendar 选项 [英] Can't pass Fullcalendar options through the directive in AngularJS

查看:23
本文介绍了无法通过 AngularJS 中的指令传递 Fullcalendar 选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图从这里使用 AngularJS Fullcalendar 指令实现一个简单的示例:https://github.com/angular-ui/ui-calendar

它不显示任何事件,也不应用自定义 FullCalendar 设置,也没有显示错误,我做错了什么?

我的代码如下:

<html data-ng-app="foodViewApp"><head lang="zh-cn"><meta charset="UTF-8"><title>AngularJS 教程</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"><link rel="stylesheet" href="resources/css/index.css"><!-- 全日历--><link rel="stylesheet" href="resources/css/fullcalendar.css"><script src="resources/lib/jquery/jquery.min.js"></script><script src="resources/lib/jquery-ui/jquery-ui.js"></script><script src="resources/lib/momentjs/moment-with-locales.js"></script><script src="resources/lib/fullcalendar/fullcalendar.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.js"></script><script src="resources/lib/fullcalendar/calendar.js"></script><script src="resources/lib/humanize-duration/humanize-duration.js"></script><script src="resources/lib/angular-timer/angular-timer.min.js"></script><script src="resources/lib/fullcalendar/gcal.js"></script><!-- 应用程序库--><script src="resources/js/app/app.js"></script><script src="resources/js/app/controllers/controllers.js"></script><body ng-controller="MainController"><!-- 标题和导航栏--><标题><nav class="navbar navbar-inverse"><div class="容器"><div class="navbar-header"><a class="navbar-brand" href="#">Scheduler</a>

<ul class="nav navbar-nav navbar-right" ng-hide="isActive('/display')"><li><a href="#schedule"><i class="fa fa-shield"></i>附表</a></li>

</nav></标题><!-- 主要内容和注入的视图--><div id="main"><div data-ng-view=""></div>

</html>

具有路由的应用程序:

var app = angular.module('foodViewApp',['ngRoute','timer','ui.calendar']);app.config(function ($routeProvider){控制台日志(测试");$routeProvider.when('/时间表',{控制器:'调度控制器',templateUrl: 'schedule.html'}).除此以外({重定向到:'/计划'});});

controllers.js:

 app.controller('MainController', function($scope, $location, categoryFactory){$scope.isActive = 函数(视图位置){返回 viewLocation === $location.path();};$scope.title = $location.path();});app.controller('ScheduleController', function($scope) {/* 配置对象 */$scope.uiConfig = {日历:{高度:450,可真实,标题:{left: '月基本周基本日议程周议程日',中心:'标题',右:'今天上一个,下一个'},dayClick: $scope.alertEventOnClick,eventDrop: $scope.alertOnDrop,eventResize: $scope.alertOnResize}};var date = new Date();var d = date.getDate();var m = date.getMonth();var y = date.getFullYear();/* 包含作用域上的自定义事件的事件源 */$scope.eventSources = [{title: 'All Day Event',start: new Date(y, m, 1)},{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},{id: 999,title: '重复事件',start: new Date(y, m, d - 3, 16, 0),allDay: false},{id: 999,title: '重复事件',start: new Date(y, m, d + 4, 16, 0),allDay: false},{title: '生日派对',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}];});

schedule.html(查看)

<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>

解决方案

好的,bug 根据:这个:https://github.com/angular-ui/ui-calendar/issues/303还有这个:https://github.com/angular-ui/ui-calendar/问题/297它根据上面的链接影响 FullCalendar 指令 v1.0.0 并解决它你应该替换

ui-calendar="uiConfig.calendar"

ui-calendar="{{uiConfig.calendar}}"

更新:看起来这个指令的最新版本可以通过 bower 获得.

I trying to implement a simple example with AngularJS Fullcalendar direcive from here: https://github.com/angular-ui/ui-calendar

It doesn't display any event neither apply custom FullCalendar settings and no error are shown, what am I doing wrong?

And my code is following:

<!DOCTYPE html>
<html data-ng-app="foodViewApp">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/index.css">
<!-- fullcalendar -->
<link rel="stylesheet" href="resources/css/fullcalendar.css">


<script src="resources/lib/jquery/jquery.min.js"></script>
<script src="resources/lib/jquery-ui/jquery-ui.js"></script>
<script src="resources/lib/momentjs/moment-with-locales.js"></script>

<script src="resources/lib/fullcalendar/fullcalendar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.js"></script>
<script src="resources/lib/fullcalendar/calendar.js"></script>
<script src="resources/lib/humanize-duration/humanize-duration.js"></script>
<script src="resources/lib/angular-timer/angular-timer.min.js"></script>
<script src="resources/lib/fullcalendar/gcal.js"></script>



<!-- App libs  -->
    <script src="resources/js/app/app.js"></script>
    <script src="resources/js/app/controllers/controllers.js"></script>
</head>
<body ng-controller="MainController">



    <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">Scheduler</a>
                    </div>

                    <ul class="nav navbar-nav navbar-right" ng-hide="isActive('/display')">

                        <li><a href="#schedule"><i class="fa fa-shield"></i> Schedule</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
            <div data-ng-view=""></div>
        </div>

</body>
</html>

Application with routing:

var app = angular.module('foodViewApp',['ngRoute','timer','ui.calendar']);

app.config(function ($routeProvider){
    console.log("test");
    $routeProvider

        .when('/schedule',{
            controller:     'ScheduleController',
            templateUrl:    'schedule.html'
        })

        .otherwise({
            redirectTo:     '/schedule'
        });
});

controllers.js:

    app.controller('MainController', function($scope, $location, categoryFactory){

    $scope.isActive = function(viewLocation) {
        return viewLocation === $location.path();
    };


    $scope.title = $location.path();
});
app.controller('ScheduleController', function($scope) {
    /* config object */
    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'month basicWeek basicDay agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        },
        dayClick: $scope.alertEventOnClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize
      }
    };

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    /* event source that contains custom events on the scope */
    $scope.eventSources = [
      {title: 'All Day Event',start: new Date(y, m, 1)},
      {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
      {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
      {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
      {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}
    ];
});

schedule.html (view)

<div class="container">
    <div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
</div>

解决方案

Ok, it's bug according to: this: https://github.com/angular-ui/ui-calendar/issues/303 and this: https://github.com/angular-ui/ui-calendar/issues/297 it affects FullCalendar directive v1.0.0 according to links above and to solve it your should replace

ui-calendar="uiConfig.calendar"

with

ui-calendar="{{uiConfig.calendar}}"

UPDATE: It looks that latest version of this directive which available through the bower is fixed already.

这篇关于无法通过 AngularJS 中的指令传递 Fullcalendar 选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆