ng-click внутри модального окна

Question

Форма отображается правильно в модальном окне, но при нажатии кнопки ng-click не отображается какой-либо эффект, чтобы отображать угловую фигурку в модальном режиме.

Должен ли отличаться синтаксис ng-click = "vm.toggle ($ event, 'startOpen, event), когда в модальном? Он отлично работает, когда форма отображается на веб-странице (не в модальной форме).

Решения, которые я нашел в stackoverflow, не работают.

См ниже код или версии plunker: http://plnkr.co/nXJ0SKzDemrhvgWyfue5

HTML

<script type="text/ng-template" id="modalEventContent.html"> 
<div class="modal-body" style="height:600px;"> 
<table class="table table-bordered"> 

<thead> 
    <tr> 
    <th>Title</th> 
    <th>Type</th> 
    <th>Starts at</th> 
    <th>Ends at</th> 
    </tr> 
</thead> 

<tbody> 

    <td><input type="text" class="form-control" ng-model="vm.event.title"></td> 
    <td> 
     <select ng-model="vm.event.type" class="form-control"> 
     <option value="important">Important</option> 
     <option value="warning">Warning</option> 
     <option value="info">Info</option> 
     <option value="inverse">Inverse</option> 
     <option value="success">Success</option> 
     <option value="special">Special</option> 
     </select> 
    </td> 
    <td> 
     <p class="input-group" style="max-width: 250px"> 
     <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="vm.event.startsAt" is-open="vm.event.startOpen" close-text="Close" /> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="vm.toggle($event, 'startOpen', vm.event)"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
     </p> 
     <timepicker ng-model="vm.event.startsAt" hour-step="1" minute-step="15" show-meridian="true"></timepicker> 
    </td> 
    <td> 
     <p class="input-group" style="max-width: 250px"> 
     <input type="text" class="form-control" readonly datepicker-popup="medium" ng-model="vm.event.endsAt" is-open="vm.event.endOpen" close-text="Close" /> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="vm.toggle($event, 'endOpen', vm.event)"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
     </p> 
     <timepicker ng-model="vm.event.endsAt" hour-step="1" minute-step="15" show-meridian="true"></timepicker> 
    </td> 

</tbody> 

</table> 
</div> 
</script> 

образец кода в моих demo.js

function showEventModal(action, event) { 
    $modal.open({ 
    templateUrl: 'modalEventContent.html', 
    controller: function() { 
     var vm = this; 
     vm.action = action; 
     vm.event = event; 
    }, 
    controllerAs: 'vm' 
    }); 
} 


vm.eventEdited = function(event) { 

$http.get('/api/events/' + event.eventid).success(function(eventsuccess){ 
showEventModal('Edited', event); 

}).error(function(err){ 
    /* do something with errors */ 
}); 
    //console.log("eventEdited"); 
}; 

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

* Обновление *

showEventModal функции была обновлена д в соответствии с @RomanKoliada предложение, чтобы добавить vm.toggle функцию внутри контроллера, но проблема не была решена:

function showEventModal(action, event) { 
    $modal.open({ 
    templateUrl: 'modalEventContent.html', 
    controller: function() { 
     var vm = this; 
     vm.action = action; 
     vm.event = event; 

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

* Окончательный обновление (раствор) *

Благодаря @RomanKoliada, раствор был найден. Код выше был обновлен с раствором ниже

В demo.js, эта линия была изменена с:

event[field] = !event[field]; 

в

vm.event[field] = !vm.event[field]; 

В HTML, является открытой был изменен с:

is-open="event.startOpen" 

в

is-open="vm.event.startOpen" 

Answer 1

Это потому, что у вас нет соответствующих функций:

controller: function() { 
    var vm = this; 
    vm.action = action; 
    vm.event = event; 
}, 

Вы должны добавить внутри этого контроллера:

controller: function() { 
    var vm = this; 
    vm.toggle=function($event, 'endOpen', event){...}; 
    ... 
}, 

Для открытия DatePicker попытаться изменить:

is-open="vm.event.startOpen" 

и в тумблере:

vm.event[field] = !vm.event[field];