複選框在Angular UI中不改變狀態

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