Флажок, не меняющий состояние в Angular UI Modal

Question

Флажок, не меняющий состояние в Angular UI Modal

0

В этом plunk у меня есть модальное окно с угловым пользовательским интерфейсом с кнопкой флажка.

Проблема в том, что флажок не меняет свое состояние при нажатии.

Попробуйте нажать кнопку несколько раз, вы увидите предупреждение, показывающее состояние, которое никогда не изменяется. Как это исправить?

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>

ps0604 25 июль 2016, в 01:31

Источник

Теги:

angularjs

angular-ui

angular-ui-bootstrap

1 ответ

Ещё вопросы

developer033 · Accepted Answer · 2016-07-24T20-06-00.000Z

Никогда не назначайте 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