Service update causing $scope in Ionic Angular Cordova to remain stagnant

As a newcomer to Angular, I've been working on a project to create an app that can answer questions, select images, and send data to the server.

I'm facing some challenges with updating the scope properly when a user selects an image. It seems like the issue lies within the 'CreateCtrl' controller or possibly the 'ImageService' and/or 'FileService'.

To download the Ionic project, click here:

// app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngIOS9UIWebViewPatch'])

    // code for module
        
});

// services.js

angular.module('starter.services', ['ngCordova'])

// code for FileService and ImageService

});

// controllers.js

angular.module('starter.controllers', ['ngCordova'])

// code for AppCtrl and CreateCtrl

});

// index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    // header content
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

// create.html

<ion-header-bar class="bar bar-header">
    // header content
</ion-header-bar>
<ion-header-bar class="bar bar-subheader">
    // subheader content
</ion-header-bar>
<ion-nav-view name="createContent"></ion-nav-view>

// templates/photos.html

<ion-view>
    <ion-content class="hidden-backbutton">
        //content for adding and displaying images
    </ion-content>
    <ion-footer-bar align-title="left" class="bar-stable">
        //footer buttons and controls
    </ion-footer-bar>
</ion-view>

XCode Console Log Output

// log messages from XCode console

Answer №1

Going through a lot of code can be overwhelming, but have you considered using $scope.apply to update your images array?


        $scope.addImage = function(type){
            $scope.hideSheet();
            ImageService.addImage(type).then(function (imageName) {
                console.log('in image service then');
                FileService.saveFile(imageName).then(function(newImage){
                    console.log('in file save image then', newImage);
                    ImageService.saveImage(newImage);
                    var imgJsonStr = angular.toJson($scope.images, true);
                    console.log('Save Image 1', imgJsonStr)

                $scope.$apply(function() {
                    $scope.images[] = imgJsonStr;
                 });

                    console.log('Images length', $scope.images.length);
                    console.log('Save Image 2', imgJsonStr)
                });
            });
        };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve a pair of values in a Node.js JavaScript application

I'm in search of a solution to locate an item and its index within an array, and then store them in separate variables. Though I'm relatively new to programming, I'm encountering challenges in tackling this problem. I attempted to use destru ...

Substitute a JSONP API call using $.ajax() with a direct server-to-server API call

My javascript application utilizes an ajax function that has the following structure: $.ajax({ url: apiURL, dataType: 'jsonp', success: function(data) { if (data.ok) { //perform actions }}}); Everything was working perfectly until I ...

Encountering error TS2307 while using gulp-typescript with requirejs and configuring multiple path aliases and packages

Currently, I am working on a substantial project that heavily relies on JavaScript. To enhance its functionality, I am considering incorporating TypeScript into the codebase. While things are running smoothly for the most part, I have encountered an issue ...

Utilizing sharing buttons and logic seamlessly between multiple views and controllers

I'm currently developing a single-page application that functions like a wizard. Upon landing on page 1, the user is required to save and proceed to page 2. I am wondering about the most effective method of sharing these buttons across all views consi ...

Implementing user authentication in node.js with passport

Having trouble with a basic login system using passport. I keep getting an error when logging in with the correct credentials: Error: Express 500 TypeError - Cannot read property 'passport' of undefined Oddly enough, everything works fine when ...

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

Error: Unable to locate attribute 'indexOf' within null object in vuejs when using consecutive v-for directives

I've been struggling with this issue for hours. I'm using vuejs' v-for to render items in <select> element's <options>, but I keep getting a type error. I've tried changing the :key values, but it still won't rende ...

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Attempting to transfer data to a MySQL database using Angular on the client-side and Express JS on the server-side. The post function on the server side works when tested with Postman. Here is the code snippet: app.use(bodyParser.json()); app.use(bodyPa ...

Leveraging Javascript to identify actual text content, rather than focusing on HTML elements

Having an issue with a WYSIWYG editor (TinyMCE) saving content into the database where values are sometimes saved that contain only tags like: <p><br data-mce-bogus="1"></p> which is not actual content. My application cannot distinguis ...

Looking for advice on mocking a factory that returns a promise in AngularJS 1.x?

In my setup, I have a factory that retrieves data as a promise through $http angular.module('app.core') .factory('dataService', dataService); dataService.$inject = ['$http']; function dataService($http){ return $http. ...

Tips for making a website display in landscape mode rather than portrait orientation

As a newcomer to web design, I am curious if it is feasible to create a website that automatically rotates to landscape view when accessed on a mobile device. The current project I am working on is fluid in design, so this feature would greatly enhance t ...

Menu manipulation: Shifting menus left and right with a click

Take a look at this link. There are 12 menu items, but only 4 are visible due to space constraint. The rest are hidden. Update: Jsfiddle cleaned up and removed my fiddle. I have provided an alternative link above. There was a missing jQuery part in my que ...

Sending a jQuery form to a node.js connect-form involves passing the form data through AJAX to

On the server side, I have implemented the following function as an expressjs middleware: function objCreation(req, res, next){ req.form.complete(function(err, fields, files){ if (err) { next(err); } else { // Set params in request ...

What is the best way to store various types of functions within a single object key?

I have a dilemma where I am storing values and individual typed functions in an array of objects. Whenever I loop through the array, all the types of all typed functions in the array are required for any value. How can I make this more specific? Check it ...

Guide on showing string array values in an alert popup using JavaScript

I am struggling to display a string array in a JavaScript alert popup. The goal is to show the string index or Serial Number, followed by a space and then a line break before displaying the value of each string in the array. Unfortunately, my current code ...

Obtaining the outcome of a service promise in AngularJS to update the value of a directive

My perspective involves the following directive: <line-chart data="generateData(id)" options="createOptions(id)" /> Within my controller, I implement: var handleData = function (response) { return response.data; } $scope.generateData = function ...

What could be causing the video not to display in landscape mode on the iPad Pro?

I'm having an issue with a standard HTML5 <video> on my website. The videos are working fine on most devices, however there is a problem specifically with the iPad Pro in landscape orientation. It seems to work properly in portrait orientation ...

Attempting to assign a class name to the <a> tag proves challenging as it seems to reset upon clicking the link, causing the class to vanish

Looking at this HTML code snippet <li> <a href="javascript:;"><i class="sidebar-item-icon ti-hummer"></i> <span class="nav-label">Product Management</span><i class="fa fa-angle-left arrow"></i>&l ...

Form a bond with the latest SignalR library to initiate communication

After attempting to connect to an asp.net core signalR server using the code below, I encountered some issues. Can you spot where I might have gone wrong? Here is the error message that I received: Error: The "promise" option must be a Promise v ...

What is the best way to grab just the whole number from a string in JavaScript?

I'm facing an issue with a specific string format: const value = "value is 10"; My goal is to retrieve the integer 10 from this string and store it in a separate variable. How can I achieve this efficiently? ...