Angular UI 模式中的复选框未更改状态

Question

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

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

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

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 模式中的复选框未更改状态

Check box not changing state in Angular UI Modal

angularjs

angular-ui

angular-ui-bootstrap