uib-datepickerのshow-spinnersを動的に更新するにはどうすればいいですか？

このスニペットでわかるように、属性show-meridianとshow-spinnersを変数$scope.myBoolと一致するように設定しました。uib-datepickerのshow-spinnersを動的に更新するにはどうすればいいですか？

また、change!と表示され、$scope.myBoolというトグルの緑色のボタンが追加されました。

show-meridianは、$scope.myBoolの変更に完全に反応していますが、show-meridianは更新されていません。

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.9/angular-sanitize.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.0/ui-bootstrap-tpls.min.js"></script> 
 
    <script> 
 
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
    angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function($scope, $log) { 
 
     $scope.mytime = new Date(); 
 

 
     $scope.hstep = 1; 
 
     $scope.mstep = 15; 
 

 
     $scope.options = { 
 
     hstep: [1, 2, 3], 
 
     mstep: [1, 5, 10, 15, 25, 30] 
 
     }; 
 

 
     $scope.ismeridian = true; 
 
     $scope.toggleMode = function() { 
 
     $scope.ismeridian = !$scope.ismeridian; 
 
     }; 
 

 
     $scope.update = function() { 
 
     var d = new Date(); 
 
     d.setHours(14); 
 
     d.setMinutes(0); 
 
     $scope.mytime = d; 
 
     }; 
 

 
     $scope.changed = function() { 
 
     $log.log('Time changed to: ' + $scope.mytime); 
 
     }; 
 

 
     $scope.clear = function() { 
 
     $scope.mytime = null; 
 
     }; 
 
     $scope.myBool = false; 
 
    }); 
 
    </script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
    .timepickercontainer .uib-timepicker .btn-link { 
 
     display: none; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="TimepickerDemoCtrl"> 
 
    <div class="timepickercontainer"> 
 
     <div uib-timepicker ng-model="mytime" ng-change="changed()" arrowkeys="false" hour-step="hstep" minute-step="mstep" show-meridian="myBool" 
 
         show-spinners="!myBool" ></div> 
 
    </div> 
 
    <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre> 
 

 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
     Hours step is: 
 
     <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     Minutes step is: 
 
     <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select> 
 
     </div> 
 
    </div> 
 

 
    <hr> 
 

 
    <button type="button" class="btn btn-info" ng-click="toggleMode()">12H/24H</button> 
 
    <button type="button" class="btn btn-default" ng-click="update()">Set to 14:00</button> 
 
    <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button> 
 
    
 
    <button class='btn btn-success' ng-click='myBool = !myBool'>change!</button> 
 

 
    </div> 
 
</body> 
 

 
</html>

出典

2017-07-27 Soldeplata Saketos

私はあなたのコードではないディレクティブに関連する問題だと思うかもしれませんが、問題のセクションでバグを報告してみてください。私はまだ研究をしています。 –

これはハックsoluctionです。私がコメントの中で言うことは、このディレクティブのレポの中の問題をマカにする方が良いです。メイクスピナー隠すため

とあなたがHERESに私のplnkrあるUI-ブートストラップ・tpls.jsファイルに入力し、このラインにこの

$scope.showSpinners = timepickerConfig.showSpinners; 
    if ($attrs.showSpinners) { 
    watchers.push($scope.$parent.$watch($parse($attrs.showSpinners), 
function(value) { 
     $scope.showSpinners = !!value; 


     updateTemplate(); 

    })); 
    }

と

$scope.showSpinners = angular.isDefined($attrs.showSpinners) ? 
$scope.$parent.$eval($attrs.showSpinners) : timepickerConfig.showSpinners;

や代替を見つける必要があります示して example

出典

2017-07-27 17:11:38

私はまた、この機能のレポに問題をオープンします。 –

uib-datepickerのshow-spinnersを動的に更新するにはどうすればいいですか？

答えて

関連する問題