Das Kontrollkästchen ändert den Status in der Benutzeroberfläche nicht. Modal

Question

In this plunk Ich habe ein modales Fenster mit einer UI-Schaltfläche mit einem Kontrollkästchen.

Das Problem ist, dass das Kontrollkästchen seinen Zustand nicht ändert, wenn darauf geklickt wird.

Wenn Sie mehrmals auf die Schaltfläche klicken, wird eine Warnung angezeigt, die den Status zeigt, der sich nie ändert. Wie behebe ich das?

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

nie ngModel direkt zuweisen $scope.

Immer immerDot Rule oder controller-as-syntax verwenden.

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