无法通过AngularJS指令传递Fullcalendar选项

无法通过AngularJS指令传递Fullcalendar选项

关注
发信
关注(28)粉丝(399)

无法通过AngularJS指令传递Fullcalendar选项

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

问题描述

我想在这里实现与AngularJS Fullcalendar direcive一个简单的例子：

它不显示任何情况下都不应用自定义FullCalendar设置并没有错误显示，我究竟做错了什么？

和我的code为以下内容：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML数据-NG-应用=foodViewApp＆GT;
＆LT;头LANG =ENGT＆;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; AngularJS教程＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css＆GT;
＆LT;链接rel =stylesheet属性HREF =资源/ CSS / index.css＆GT;
＆所述;！ -  fullcalendar  - ＆GT;
＆LT;链接rel =stylesheet属性HREF =资源/ CSS / fullcalendar.css＆GT;
＆LT;脚本SRC =资源/ lib中/ jQuery的/ jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资源/ lib中/ jQuery的的UI / jQuery的-ui.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资源/ lib目录/ momentjs /力矩与 -  locales.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本SRC =资源/ lib目录/ fullcalendar / fullcalendar.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.js\"></script>
＆LT;脚本SRC =资源/ lib目录/ fullcalendar / calendar.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资源/ lib目录/人性化的持续时间/人性化-duration.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资源/ lib目录/角定时器/角timer.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =资源/ lib目录/ fullcalendar / gcal.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 应用程序库 - ＆GT;
    ＆LT;脚本SRC =资源/ JS /应用/ app.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =资源/ JS /应用/控制器/ controllers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=MainController＆GT;    ＆LT;！ - 头和导航条 - ＆GT;
        ＆LT;报头GT;
            ＆LT;导航类=导航栏导航栏逆＆GT;
                ＆LT; D​​IV CLASS =容器＆GT;
                    ＆LT; D​​IV CLASS =导航栏头＆GT;
                        ＆LT;一类=导航栏品牌的href =＃＆GT;调度器LT; / A＆GT;
                    ＆LT; / DIV＆GT;                    ＆LT; UL类=NAV导航栏，导航栏导航右NG隐藏=isActive（'/显示'）＆GT;                        ＆LT;立GT;＆LT; A HREF =＃时间表＆GT;＆LT; I类=发发盾＆GT;＆LT; / I＆GT;赛程＆LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT; / UL＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / NAV＆GT;
        ＆LT; /头＆GT;        ＆LT;！ - 主要内容，并注入视图 - ＆GT;
        ＆LT; D​​IV ID =主＆GT;
            ＆LT; D​​IV数据-NG-视图=＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

与路由应用：

  VAR应用= angular.module（'foodViewApp'，['ngRoute'，'定时'，'ui.calendar']）;的app.config（函数（$ routeProvider）{
    的console.log（测试）;
    $ routeProvider        。当（'/时间表'，{
            控制器：'ScheduleController'，
            templateUrl：schedule.html
        }）        。除此以外（{
            redirectTo：'/时间表
        }）;
}）;

controllers.js：

  app.controller（'MainController'，函数（$范围，$位置，categoryFactory）{    $ scope.isActive =功能（viewLocation）{
        返回viewLocation === $ location.path（）;
    };
    $ scope.title = $ location.path（）;
}）;
app.controller（'ScheduleController'，函数（$范围）{
    / *配置对象* /
    $ scope.uiConfig = {
      日历：{
        高度：450，
        编辑：真的，
        标题：{
          左：一个月basicWeek basicDay agendaWeek agendaDay'，
          中心：'标题'，
          右：今天preV，下一个'
        }，
        dayClick：$ scope.alertEventOnClick，
        eventDrop：$ scope.alertOnDrop，
        eventResize：$ scope.alertOnResize
      }
    };    VAR日期=新的日期（）;
    变种D = date.getDate（）;
    变种M = date.getMonth（）;
    变种Y = date.getFullYear（）;    包含在范围自定义事件/ *事件源* /
    $ scope.eventSources = [
      {标题：全天事件，开始新的日期（Y，M，1）}，
      {标题：龙事件，开始新的日期（Y，M，D  -  5），年底新的日期（Y，M，D  -  2）}，
      {ID：999，标题：重复事件，开始新的日期（Y，M，D  -  3，16，0），allDay：假}，
      {ID：999，标题：重复事件，开始新的日期（Y，M，D + 4，16，0），allDay：假}，
      {标题：生日派对，开始新的日期（Y，M，D + 1，19，0），终点：新的Date（Y，M，D + 1，22，30），allDay：假}
    ];
}）;

schedule.html（视图）

 ＆LT; D​​IV CLASS =容器＆GT;
    ＆LT;格UI日历=uiConfig.calendarNG模型=eventSources＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;


解决方案

好吧，这是根据错误：
这样的：
而这个：
它根据上面并解决它的链接会影响FullCalendar指令V1.0.0您应该替换

  UI日历=uiConfig.calendar

与

  UI日历={{uiConfig.calendar}}

更新：
看起来，这个指令，它可以通过凉亭的最新版本已经是固定的。

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/303and this: https://github.com/angular-ui/ui-calendar/issues/297it 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选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-29 11:59
Powered by LMLPHP ©2024 无法通过AngularJS指令传递Fullcalendar选项 0.037521