需要帮助了解Angular $ scope

时间:2015-09-18 16:01:07

标签: javascript angularjs twitter-bootstrap datepicker angularjs-scope

我正在使用DatePicker,这是一个用Angular编写的Bootstrap组件,用于在用户安排Meetup事件时在日历日期显示彩色圆点。 Meetup API功能完美运行,但是当我尝试填充DatePicker时,我得到了javascript函数的“未捕获引用错误”。我认为$ scope变量让我感到沮丧。我尝试过几种不同的方式编写markMeetingOnDate(),但我以前从未使用过AngularJS,而且我不确定我做错了什么。

.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {

    // This function results in an uncaught reference error
    function markMeetingOnDate(dateString) {
      dateInput = Date.parse(dateString)
      $scope.events = [{
        date: dateInput,
        status: 'full'    // colors the calendar date
      }];
    };

    // This code that does the same thing as above function works
    testDateString = "Thursday, September 17, 2015";
    dateInput = Date.parse(testDateString);
    $scope.events = [{
      date: dateInput,
      status: 'full'
    }];

});

.PHP

<div ng-controller="DatepickerDemoCtrl">
        <h4>Meetup Calendar</h4>
        <div style="display:inline-block; min-height:290px;" id="DatepickerOnLeft">
          <?php
            // get all events for this member - $response is a JSON array
            $response = $meetup->getEvents(array(
              'member_id' => '190559018',
              'time' => '0,2m',
              'only' => 'group.name,venue.name,venue.address_1,venue.address_2,venue.zip,venue.city,venue.state,venue.name,time,event_url,name'
            ));

            // mark all events on the calendar
            $numOfMeetings = count($response);
            date_default_timezone_set('America/Chicago');
            for ($i = 0; $i < $numOfMeetings; $i++) {
              $date = date('l, F d, Y', $response[$i]->time / 1000);
              echo "Date is: $date";
              echo '<script type="text/javascript">'
                 , 'markMeetingOnDate(' . json_encode($date) . ');'
                 , '</script>'
              ;
            }
          ?>
          <datepicker ng-model="dt" min-date="minDate" show-weeks="false" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
        </div>


        <div id="MeetupDetailsOnRight">
          <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
        </div>
    </div>

0 个答案:

没有答案