Question

In this plunk我有一个带有复选框按钮的Angular UI模式窗口。

问题是复选框在单击时不会改变其状态。

尝试多次单击该按钮，您将看到一条警报，显示永不改变的状态。如何解决这个问题？

使用Javascript：

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {
});


app.directive('buttondir', function ($uibModal) {

    var directive = {};

    directive.restrict = 'EA';

    directive.scope = true;

    directive.templateUrl = "buttondir.html"

    directive.link = function (scope, element, attrs) {


      scope.modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          scope: scope,
          windowClass: 'app-modal'
        }); 

      scope.singleModel = 1;

      scope.onclick = function(){
        alert(scope.singleModel)
      };
    };



    return directive;

});

HTML：

<script type="text/ng-template" id="myModalContent.html">

  <div class="modal-header">
      <h4 class="modal-title">The Title</h4>
  </div>

     <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox
         btn-checkbox-true="1" btn-checkbox-false="0" ng-click="onclick()"> Single Toggle </button>

</script>

Answer 1

切勿直接将ngModel分配给$scope。

始终使用Dot Rule或controller-as-syntax。

scope.model = {};
scope.model.singleModel = 1;

scope.onclick = function() {
  alert(scope.model.singleModel)
};

<button type="button" class="btn btn-primary" ng-model="model.singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0" ng-click="onclick()"> Single Toggle </button>

DEMO

复选框不会更改Angular UI Modal中的状态

1 个答案: