UI Bootstrap Modal promise and controller scope

Question

I'm new to AngularJS and using UI Bootstrap in a project. I want to mark an I've read the T&Cs checkbox as checked once the modal (containing the T&Cs text) is closed (but not when the modal is dismissed).

I've adapted the general example at https://angular-ui.github.io/bootstrap/ but having issues updating the scope / view with the value of $scope.accept_terms.

I have the modal opening / closing fine, but the checkbox always remains unchecked.

HTML:

<form>
    <div class="checkbox">
        <input type="checkbox" id="user_details_termsConditions"
               name="user_details[termsConditions]"
               required="required" ng-checked="accept_terms" />
        <label for="user_details_termsConditions" >I agree to the <a href="" ng-click="$ctrl.open('', '.modal-container')">terms and conditions</a></label>                 
    </div>
</form>

JS:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document, $scope) {
  var $ctrl = this;

  $ctrl.animationsEnabled = true;

  $ctrl.open = function (size, parentSelector) {
    var parentElem = parentSelector ?
    angular.element($document[0].querySelector('.container ' + parentSelector)) : undefined;

    var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: size,
      appendTo: parentElem
    });

    modalInstance.result.then(function (result) {
        $scope.accept_terms = result;
        $log.info('accept_terms = ' + $scope.accept_terms);
        // prints accept_terms = 1
    }, function () {

    });

  };
});

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance) {
  var $ctrl = this;

  $ctrl.ok = function () {
    $uibModalInstance.close(true);
  };
});

Can anyone point me in the right direction?

The input element needs an [ng-model directive](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D) — georgeawg, Feb 11 '17 at 18:35
Thank-you, that did the trick! I got rid of ng-checked and replaced with ng-model :-). — Richard, Feb 12 '17 at 15:18

score 0 · Answer 1 · edited Feb 12 '17 at 22:54

0

Turns out this was a simple matter of using ng-model on the checkbox instead of ng-checked:

Controller:

modalInstance.result.then(function (result) {
    $scope.accept_terms = true;
}, function () {

});

Markup:

<input type="checkbox" id="user_details_termsConditions"
       name="user_details[termsConditions]" required="required"
       ng-model="accept_terms" value="1" />

edited Feb 12 '17 at 22:54

georgeawg

48,608
13
72
95

answered Feb 12 '17 at 15:22

Richard

11
1

UI Bootstrap Modal promise and controller scope

1 Answers1