在模式中单击 window

Question

表单在模态 window 中正确显示，但是当单击以在模态中显示 angular 日期选择器时，ng-click 似乎没有任何效果。

ng-click="vm.toggle($event, 'startOpen', event)" 语法在模式中是否应该不同？当表单显示在网页上（而不是模态）时，它工作得很好。

我在 Whosebug 上找到的解决方案无效。

查看下面的代码或 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 已更改为：

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){...};
     ...
 },

打开日期选择器尝试更改：

is-open="vm.event.startOpen"

在切换函数中：

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

在模式中单击 window

ng-click inside a modal window

modal-dialog

angularjs

angular-ui-bootstrap