Question

我正在使用Bootstrap 3的Angular fork中的模态：http://angular-ui.github.io/bootstrap/#/modal我试图在模态中使用一个复选框并将其值返回到我的主控制器中。

复选框值在视图中很好地绑定，但在模态的控制器中没有。以下是此问题的示例：Plunker

模态控制器：

var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.checked = false;

  $scope.ok = function () {
    $modalInstance.close( $scope.checked);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

=＆GT; ok函数中的$ scope.checked不包含正确的值...

观点：

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <label>
          <input type="checkbox" ng-model="checked"> test
        </label><br/>
        Checked: {{checked}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

有什么想法吗？

先谢谢

Answer 1

works将checked参数放在对象中的脏技巧。

$scope.checked = {c:false};

$scope.ok = function () {
  $modalInstance.close( $scope.checked.c);
};

Answer 2

你可以直接指定检查值作为函数的参数，这是绕过模态视图和相关控制器之间缺少绑定的一个小解决方法：

<button class="btn btn-primary" ng-click="ok(checked)">OK</button>

然后将其作为函数参数传递给控制器：

$scope.ok = function (result) {
       $modalInstance.close( result);
};

完整的工作示例here

Angular Bootstrap模式 - 复选框未绑定到控制器

2 个答案: