Variable in Angular Modal UI not watched

Question

In this plunk I have an Angular Modal UI with a variable that is watched, however the watch function is not triggered when the variable is changed, what's wrong?

Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

        $scope.x = 'a';

        $scope.open = function(){
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }); 
        };

        $scope.close = function(){
          $scope.modalInstance.close();
        };


        $scope.$watch('x', function (newValue, oldValue) {
          if (typeof newValue === 'undefined')
              return;
           alert('value='+$scope.newValue);
       });
});

HTML

<button ng-click="open()">Open</button>
<script type="text/ng-template" id="myModalContent.html">
   <div class="modal-header">
      <h4 class="modal-title">The Title</h4>
      value <input type="text" ng-model="x" />
      <button ng-click="close()">Close</button>
   </div>
</script>

Try adding your controller to your modal instance, such as $uibModal.open({ templateUrl: "myModalContent.html", scope: $scope, controller: "ctl" }) — Tom Johnson
– Tom Johnson, Commented Jan 9, 2018 at 13:34

Tom Johnson · Accepted Answer · 2018-01-09 13:40:58Z

1

Just tested in the plunker, $uibModal needs your controller in order to bind to your scope.

Change;

$scope.open = function(){
      $scope.modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          scope: $scope
        }); 
    };

To;

$scope.open = function(){
      $scope.modalInstance = $uibModal.open({
          templateUrl: 'myModalContent.html',
          scope: $scope,
          controller: "ctl"
        }); 
    };

If you are using a .js file for it, you'd use controllerUrl = "path/to/jsfile.js" plus the name of said controller.

answered Jan 9, 2018 at 13:40

Tom Johnson

7015 silver badges16 bronze badges

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

Comments

Pankaj Rupapara · Accepted Answer · 2018-01-09 13:38:57Z

1

Please define controller in $uibModal.open for more reference please visit this document in details https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

answered Jan 9, 2018 at 13:38

Pankaj Rupapara

7904 silver badges9 bronze badges

Comments

DaFois · Accepted Answer · 2021-11-25 12:47:20Z

0

This question helped in resolving $uibModal onload event

just added in modalController

$scope.open = function () {
    $scope.status.opened = true;
};
$scope.$watch(status, function (newValue, oldValue) {
    //code required onload..
});

edited Nov 25, 2021 at 12:47

DaFois

2,2238 gold badges28 silver badges47 bronze badges

answered Nov 25, 2021 at 7:25

Hemant

111 bronze badge

Collectives™ on Stack Overflow

Variable in Angular Modal UI not watched

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related