Setting checkbox value when modal closes in Angular

Question

I am trying to automatically check a checkbox when a modal closes. I am using one controller for the modal and another controller for the main page. The code below isn't working. Do I need to use a directive in order to accomplish this, or is there another way?

HTML - Main Page:

<label>
  <input type="checkbox" ng-model="agreementForm.value1"> I agree.
</label>

HTML - Modal:

<div class="modal-footer">
 <button ng-click="agreementForm.cancel()" class="btn btn-warning">Cancel</button>
  <button ng-click="agreementForm.agree()" ng-disabled="agreementForm.$invalid" class="btn btn-primary" >I agree</button>
</div>

Javascript for Controllers:

myApp.controller('AgreementFormCtrl', function ($location, $stateParams, $modalInstance) {
  var agreementForm = this;
  agreementForm.cancel = function () {
  $modalInstance.dismiss('cancel');
};

agreementForm.agree = function() {
  agreementForm.value1=true;
  $modalInstance.close(agreementForm.selected);
});

myApp.controller('ContactFormCtrl',
   function ($location, $stateParams, Contacts) {
     var contactForm = this;
  });
   contactForm.save = function () {
     Contacts.$add(contactForm.contact).then(function (data) {
       $location.path('/');
     });
   };

Router for Modal:

.state('payment.agreement', {
url: '/agreement',
onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
   $modal.open({
       templateUrl: 'views/agreement.html',
       controller: 'AgreementFormCtrl as agreementForm'
      }
    )
      .result.finally(function () {
        $state.go('^');
      });
  }]
})

Are you sure the `agreementForm.agree()` function is actually being called and executes without error? Bootstrap UI modals have some scope considerations which may be the problem here, see http://stackoverflow.com/questions/18924577/scope-issues-with-angular-ui-modal — Fasermaler, Mar 11 '15 at 08:12
@Fasermaler Thanks for the link. I think `agreementForm.agree()` is working OK. When I click it, the modal closes. And I'm not seeing any errors in my console. — Ken, Mar 11 '15 at 08:18

score 1 · Answer 1 · answered Mar 11 '15 at 08:11

1

your can do it by using $rootScope and also you missed to initialzed the $scope

First you need to add ng-checked directive in the checkbox

 <input type="checkbox" **ng-checked="agreementForm.IsChecked"**
  ng-model="agreementForm.value1"> I agree.

Then you need initialize the rootscope in your controller

myApp.controller('AgreementFormCtrl', function ($location, $stateParams, $modalInstance,**$rootScope,$scope**) { //code };

and finally you can assign the value for checked object when a modal closes

$scope.agreementForm.cancel = function () {
  $modalInstance.dismiss('cancel');
$rootScope.agreementForm.IsChecked="Checked";//True or false
};

answered Mar 11 '15 at 08:11

Ramesh Rajendran

37,412
45
153
234

Thank you. I've heard that it's a bad idea to use rootScope unless absolutely necessary. Is it OK to use in this instance? As you can see, I'm still learning... – Ken Mar 11 '15 at 08:14
I need to type faster, I was asking the same thing of Ramesh. Obviously just doing stuff in root scope will solve any problems with the scope hierarchy you may have, but I think you should also be able to do it without this rather drastic alternative. – Fasermaler Mar 11 '15 at 08:15
I think your problem will be solved with using rootscope. It's not good. but if you called a model object to other controler, it might me used. – Ramesh Rajendran Mar 11 '15 at 08:18
@Ramesh Rajendran I didn't use `$scope` because I'm trying to use the As Controller syntax. Did I use it incorrectly? – Ken Mar 11 '15 at 08:27
if you using angularjs,then the variables are you should be `$scope` variables – Ramesh Rajendran Mar 11 '15 at 08:35
@Ramesh Rajendran I'm a little confused. I thought that the Controller As syntax was an accepted alternative to $scope. See [this Stackoverflow post](https://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification). – Ken Mar 11 '15 at 23:37

Setting checkbox value when modal closes in Angular

1 Answers1