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已从：

更改

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];

在模态窗口内单击

1 个答案: