Угловой щелчок не передавая переменные, хотя

Question

Я борется с проблемой angular-js, я не могу понять, почему мой ng-click не отправляет никакие значения функции jquery, которая подключена к ней. Он запускает jquery fine, но когда он входит в jquery, переменные не идут вместе с ним!

Так некоторая информация в первую очередь:

Я использую угловой самозагрузки-календарьLink to Project (Это то, что я имею проблемы с)

Использование углового самозагрузки-календарь У меня есть реализовал пользовательский шаблон дня, используя инструкции от github Instruction Page

Ng-click запускает мой код правильно, хотя информация не передается от клика к событию клиента.

<span data-cal-date 
    ng-click="vm.calendarCtrl.dateClicked(day.date)" 
    class="pointer btn" 
    id="openDay" 
    ng-bind="day.dayLabel"> 
</span> 

<mwl-calendar events="vm.events" 
     view="vm.calendarView" 
     view-title="vm.calendarTitle" 
     view-date="vm.viewDate" 
     on-event-click="vm.eventClicked(calendarEvent)" 
     on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" 
     edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'" 
     delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" 
     on-edit-event-click="vm.eventEdited(calendarEvent)" 
     on-delete-event-click="vm.eventDeleted(calendarEvent)" 
     cell-is-open="vm.isCellOpen" 
     day-view-start="06:00" 
     day-view-end="22:00" 
     day-view-split="30" 
     cell-modifier="vm.modifyCell(calendarCell)" 
     on-view-change-click="vm.dateClicked(day)">  
</mwl-calendar> 

vm.dateClicked = function (day) { 

    alert("Do Something"); 

}; 

Результаты

день = неопределенные

Версии:

"angular-bootstrap-calendar": "0.19.3", 
"angular": "1.5.0", 
"font-awesome": "4.5.0", 
"moment": "2.12.0", 
"interact.js": "1.2.6", 
"angular-bootstrap": "1.2.4", 
"angular-touch": "1.5.0", 
"angular-animate": "1.5.0", 

Полные Примеры кода

ManRoster.cshtml

<div class="col-lg-12"> 
    <div class="col-lg-12 panel panel-default"> 
     <div ng-app="UserCal" class="textfix"> 
      <script id="calendarWeekView.html" type="text/ng-template"> 
       <div class="cal-week-box" ng-class="{'cal-day-box': vm.showTimes}"> 
        <div class="cal-row-fluid cal-row-head"> 

         <div class="cal-cell1" 
          ng-repeat="day in vm.view.days track by $index" 
          ng-class="{ 
           'cal-day-weekend': day.isWeekend, 
           'cal-day-past': day.isPast, 
           'cal-day-today': day.isToday, 
           'cal-day-future': day.isFuture}" 
          mwl-element-dimensions="vm.dayColumnDimensions" 
          mwl-droppable 
          on-drop="vm.eventDropped(dropData.event, day.date)"> 

          <div id="resourcescount"> 
           {{ day.events.length }} 
          </div> 

          <span ng-bind="day.weekDayLabel"> 
          </span> 
          <br> 
          <small> 
          <span data-cal-date 
            ng-click="vm.calendarCtrl.dateClicked(day.date)" 
            class="pointer btn" 
            id="openDay" 
            ng-bind="day.dayLabel"> 
          </span> 
          </small> 
         </div> 

        </div> 

        <div class="cal-day-panel clearfix" ng-style="{height: vm.showTimes ? (vm.dayViewHeight + 'px') : 'auto'}"> 
         <mwl-calendar-hour-list day-view-start="vm.dayViewStart" 
               day-view-end="vm.dayViewEnd" 
               day-view-split="vm.dayViewSplit" 
               day-width="vm.dayColumnDimensions.width" 
               view-date="vm.viewDate" 
               on-timespan-click="false" 
               ng-if="vm.showTimes"> 
         </mwl-calendar-hour-list> 

         <div class="row"> 
          <div class="col-xs-12"> 
           <div class="cal-row-fluid" 
            ng-repeat="event in vm.view.events track by event.$id"> 

            <div ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + (vm.showTimes ? '' : ' cal-offset' + event.dayOffset) + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass" 
             ng-style="{ 
               top: vm.showTimes ? ((event.top + 2) + 'px') : 'auto', 
               position: vm.showTimes ? 'absolute' : 'inherit', 
               width: vm.showTimes ? (vm.dayColumnDimensions.width + 'px') : '', 
               left: vm.showTimes ? (vm.dayColumnDimensions.width * event.dayOffset) + 15 + 'px' : '' 
              }" 
             data-event-class 
             mwl-draggable="event.draggable === true" 
             axis="vm.showTimes ? 'xy' : 'x'" 
             snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}" 
             on-drag="vm.tempTimeChanged(event, y)" 
             on-drag-end="vm.weekDragged(event, x, y)" 
             mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes" 
             resize-edges="{left: true, right: true}" 
             on-resize-end="vm.weekResized(event, edge, x)"> 

             Shift 


             <strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong> 

             <a href="javascript:;" 
              ng-click="vm.onEventClick({calendarEvent: event})" 
              class="event-item" 
              ng-bind-html="vm.$sce.trustAsHtml(event.title)" 
              uib-tooltip-html="event.title | calendarTrustAsHtml" 
              tooltip-placement="left" 
              tooltip-append-to-body="true"> 
             </a> 
            </div> 
           </div> 
          </div> 

         </div> 
          <div id="ResourceInfo"> 
           This will be the select panel 
          </div> 
        </div> 
       </div> 

      </script> 

      <!-- This is the end of the testing script --> 

      <div ng-controller="Cal as vm"> 
       <h2 class="text-center">{{ vm.calendarTitle }}</h2> 

       <div class="row"> 

        <div class="col-md-6 text-center"> 
         <div class="btn-group"> 

          <button class="btn btn-primary" 
            mwl-date-modifier 
            date="vm.viewDate" 
            decrement="vm.calendarView"> 
           Previous 
          </button> 
          <button class="btn btn-default" 
            mwl-date-modifier 
            date="vm.viewDate" 
            set-to-today> 
           Today 
          </button> 
          <button class="btn btn-primary" 
            mwl-date-modifier 
            date="vm.viewDate" 
            increment="vm.calendarView"> 
           Next 
          </button> 
         </div> 
        </div> 

        <br class="visible-xs visible-sm"> 

        <div class="col-md-6 text-center"> 
         <div class="btn-group"> 
          <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label> 
          <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label> 
          <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label> 
          <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label> 
         </div> 
        </div> 

       </div> 

       <br> 

       <mwl-calendar events="vm.events" 
           view="vm.calendarView" 
           view-title="vm.calendarTitle" 
           view-date="vm.viewDate" 
           on-event-click="vm.eventClicked(calendarEvent)" 
           on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" 
           edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'" 
           delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" 
           on-edit-event-click="vm.eventEdited(calendarEvent)" 
           on-delete-event-click="vm.eventDeleted(calendarEvent)" 
           cell-is-open="vm.isCellOpen" 
           day-view-start="06:00" 
           day-view-end="22:00" 
           day-view-split="30" 
           cell-modifier="vm.modifyCell(calendarCell)" 
           on-view-change-click="vm.dateClicked(date)">  
       </mwl-calendar> 
       <br /> 
      </div> 
     </div> 
    </div> 
</div> 

ManRoster.js

angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate']) 
    .controller('Cal', populateCal); 


function populateCal($http, calendarConfig) { 
    var resultset = []; 
    var userID = 1; 
    var vm = this; 
    calendarConfig.templates.calendarWeekView = 'calendarWeekView.html'; 

    vm.calendarView = 'week'; 
    vm.viewDate = new Date(); 
    vm.events = []; 
    vm.isCellOpen = true; 

    vm.toggle = function ($event, field, event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 
     event[field] = !event[field]; 
    }; 


    vm.dateClicked = function (day) { 

     alert("Do Something"); 

    }; 

} 

Plunker As Requested

Answer 1

Давайте попробуем это. Я создал настраиваемую директиву для захвата событий щелчка, по-видимому, для меня эта запись фиксирует меня.

http://plnkr.co/edit/1XlQkgj5eJeuy728bEwI?p=preview

Добавить директиву (я просто назвал его testDirective):

angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate']) 
    .controller('Cal', populateCal) 
    .directive('testDirective', testDirective); 

выделенным текст

function testDirective() { 
     return { 
     link: function(scope,elem,attrs) { 
      angular.element(elem).on('click', function (evt) { 
      alert('You clicked on: ' + scope.vm.viewDate) 
      }); 
     } 
    }; 
} 

Добавьте его в Н-календарный элемент:

<mwl-calendar test-directive events="vm.events" 

Первоначальная идея:

Хорошо, я думаю, что у меня есть сейчас. В индексе.HTML, изменить

on-view-change-click="vm.dateClicked(date)" 

в

on-view-change-click="vm.dateClicked(this.vm.viewDate)" 

Он должен выглядеть следующим образом:

<mwl-calendar 
     events="vm.events" 
     view="vm.calendarView" 
     view-title="vm.calendarTitle" 
     view-date="vm.viewDate" 
     on-event-click="vm.eventClicked(calendarEvent)" 
     on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" 
     edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'" 
     delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" 
     on-edit-event-click="vm.eventEdited(calendarEvent)" 
     on-delete-event-click="vm.eventDeleted(calendarEvent)" 
     cell-is-open="vm.isCellOpen" 
     day-view-start="06:00" 
     day-view-end="22:00" 
     day-view-split="30" 
     cell-modifier="vm.modifyCell(calendarCell)" 
     on-view-change-click="vm.dateClicked(this.vm.viewDate)"> 
</mwl-calendar> 

Plunker: http://plnkr.co/edit/kKpjoCFvaR6xBjQL1bT6?p=preview