Data binding issue with Angular JS and Bootstrap Modal

Question

I am unable to change scope values using angular js when using bootstrap modal. Basically I am calling function to open modal that I store in controller.js file and then I am trying to amend scope values and display them in modal dialog box.

I added click event to one of my js components.

eventClick: function(event, element) {
    var $scope = angular.element("#eRotaController").scope();
    $scope.OpenModal("addEventModal", false, event);
}

Part of html element (modal dialog):

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">{{misc.modalTitles}}</h4>
</div>

Finally OpenModal function and variables

// Variables
$scope.misc = {
    modalTitle: "",
    showRemoveEvent : false
};

$scope.OpenModal = function (modal, isNew, event)
{
    if (isNew) {
        $scope.misc.modalTitle = "Add new Event";
    }
    else{
        $scope.misc.modalTitle = "Update event for: " + event.title;
        $scope.misc.showRemoveEvent = true;
        console.log($scope);
    }

    $("#" + modal).modal('show');
}

When I update modalTitle for instance inside OpenModal function it does not reflect any changes when opening modal.

I created simpler example to find out if it's modal issue and turns out it's not.

Quick test that I have added :

<button ng-click="OpenModal2()"></button>
{{misc.showRemoveEvent}}


$scope.OpenModal2 = function()
{
    $scope.misc.modalTitle = "Update event for: " + event.title;
    $scope.misc.showRemoveEvent = true;
}

That works fine.

So it works correctly when method is called directly from html element but fail when called from js using reference to controller :

 var $scope = angular.element("#eRotaController").scope();

 $scope.OpenModal("addEventModal", false, event);

Does not work

Actually modal bootstrap got nothing do to with it. I tried to change scope value inside OpenModal and still does not work. — Adam Bielecki
– Adam Bielecki, Commented Jun 20, 2016 at 10:24
I highly advice you to use ui-bootstrap instead of regular bootstrap, it's bootstrap implemented in angular (keeps your code clean with directives etc) — Martijn Welker
– Martijn Welker, Commented Jun 20, 2016 at 10:25
Thanks Martijn, but bootstrap is not the issue here after further investigation. Basically the function I called from js not directly from DOM is updating scope values but then it's not reflecting the changes on DOM. — Adam Bielecki
– Adam Bielecki, Commented Jun 20, 2016 at 10:27

Debasish Mohapatra · Accepted Answer · 2016-06-20 11:57:31Z

1

Try doing:

eventClick: function(event, element) {
    var $scope = angular.element("#eRotaController").scope();
    $scope.$apply(function (){
         $scope.OpenModal("addEventModal", false, event);
    })
},

If eventClick is a function outside of angular context then the above code may work.

answered Jun 20, 2016 at 11:57

Debasish Mohapatra

8564 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Bielecki Over a year ago

Thank you! You sir deserved medal of awesomeness.

Itsik Mauyhas · Accepted Answer · 2016-06-20 10:29:53Z

Try using $uibModal - $uibModal documation, it goes like:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;
  //open modal
  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

Collectives™ on Stack Overflow

Data binding issue with Angular JS and Bootstrap Modal

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related