角度UIモーダルで状態を変更しないチェックボックス

Question

In this plunk私は、チェックボックスボタン付きの角度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

$scopeに直接ngModelを割り当てることはありません。

常に常に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