Ionic modal window and $scope.watch problem

ionic-v1
1

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

2

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.

3

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

4

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

5

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?

6

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?

7

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?

8

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
9

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