Ionic modal window and $scope.watch problem

hey all,

i have a problem depending the modal window and the $scope.watch. what i want to do is to open a modal window, activate the camera trough a button for making an image and load it in a canvas element. with “$scope.watch” i watch the ng-model of the camera button and if there changes the value it should load it to the canvas. now i implemented this scenario somewhere else in my application (which is not a modal window) and it works fine. it seems the $scope.watch is called only once and does not watch again on any changes on my ng-model.

can anyone help on that? i am struggling for a while on that and i don’t know what the problem is

What is the ng-model defined as? Is it something like ng-model="cameraInput" or is it ng-model="data.cameraInput".

I suspect you might not be using the an object. Because of that and the modal directive, you are not getting the right inheritance on the scope.

actually it is defined like ng-model=“cameraInput”

Change it to use the dot notation. I bet that is the problem.

it is still not working. here is the code snippet:

app.controller('MainCtrl', ['$rootScope', '$scope', '$ionicModal', 'HttpService', '$ionicActionSheet', 'NotificationService', '$location', 'localStorageService', function($rootScope, $scope, $ionicModal, HttpService, $ionicActionSheet, NotificationService, $location, localStorageService) {

var u_id = localStorageService.get(‘user.u_id’);

// BOULDER CRATE MODAL WINDOW - Load the modal from the given template URL
$ionicModal.fromTemplateUrl(‘templates/createBoulder.html’, function(modal) {
$scope.modal = modal;
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: ‘slide-in-up’
});

$scope.openModal = function() {
$scope.modal.show();

$scope.$watch('data.boulder', function(value) {
    if(value) {
      $scope.image = "data:image/jpeg;base64," + value;
    }
}, true);

};

$scope.closeModal = function() {
$scope.modal.hide();
};

and in the html i actually just want to show it as a img tag for testing.

<button class="button button-small button-light" camera-boulder ng-model="data.boulder">Bild hochladen</button>
    <img ng-src="{{image}}" alt="" />

camera-boulder is the directive for calling the devices camera.
what do you think?

In my own app, I’m able to watch scope values on a modal. So, not sure why you can’t. Consider putting the watch just in the controller, and not in the modal definition as it is now.

If that doesn’t work, can you put a sample up on Plunker or Codepen?

it does still not work. it is quite difficult to create a plunker as there are a lot of files included. i am not sure how to show you the files in details? did you put the $scope.watch on the mainCtrl or on the Ctrl which is loaded in the modal? the weird thing is that absolutely nothing is loaded.

the thing is that still the $scope.watch is called only once when the app is loaded. afterwards there is no watch on the model. can you explain or show how you did it?

Check out this sample I made for you.

Since I didn’t want to be dealing with images, I simply made an input field in the modal. It is bound to data.boulder. When you type in it, the $watch detects the change and puts the info in a scope variable called boulderDataChanges. As you type, the data in boulderDataChanges get plopped in the modal as well.

From this, you can see that the $watch really is listening to all changes on data.boulders.

3 Likes

i got it work now. :slight_smile: thank you very much. my problem was that i didn’t saved the watch in $scope.data. i did choose my own param and so it didn’t worked. now i have my img and it works.
this is the actual watch part:

$scope.$watch('data.boulder', function(value) {
if(value) {
  $scope.data = value;
}

}, true);

before i had $scope.boulder = value and in the html i called {{boulder}} which didn’t work at all.

you saved my day. very appreciated