Issue with UI not updating when calling parent controller function from mdDialog

Hey there, I'm experiencing an issue with displaying a mdDialog from Angular Material. I'm using my directive's controller as the controller for the dialog to easily call a specific function without needing to pass additional data back and add extra code steps. The function is being successfully called, but the UI doesn't update once the function completes. Can anyone pinpoint where the problem might be?

Let's assume that the first if statement is true.

Dialog Call

this.showImageUploadModal = function() {
  $mdDialog.show({
      clickOutsideToClose: true,
      scope: $scope,        // use parent scope in template
      preserveScope: true,  // do not forget this if using parent scope
      templateUrl: 'app/directives/modals/upload-files-modal.html',
      controller: MessagingController,
      controllerAs: 'controller'
      });
};

Function Called but UI not Updating

this.addAttachment = function() {
  console.log("sending attachment");
  var ref = this;
  var note = this.user.first_name + " has attached a file.";

  if($state.current.name === 'inbox') {
    MessagingService.createMessage(this.convo.id, note, this.userUploadedNoteFiles).then(
      function success(response) {
        console.log("Inbox attachment sent", response);
        ref.convo.messages.push(response.data);
        console.log(ref.convo.messages);
        // ref.viewableNoteFiles = [];
      },
      function failure(response) {
        $mdToast.show(
          $mdToast.simple().
          textContent("Failed to send the message please try again.").
          theme('error-toast'));
      }
    );
  } else if (this.notes === 'true') {
    TicketingService.addNote($stateParams.id, note, this.userUploadedNoteFiles).then(
      function success(response) {
        console.log("Notes attachment sent", response);
        ref.convo.messages.push(response.data);
        // ref.viewableNoteFiles = [];
      },
      function failure(response) {
        $mdToast.show(
          $mdToast.simple().
          textContent("Failed to send the message please try again.").
          theme('error-toast'));
      }
    );
  } else if(this.contractor === 'true') {
    TicketingService.createMessage($stateParams.id, this.convo.id, note, this.userUploadedNoteFiles).then(
    function success (response) {
        console.log("Contractor attachment sent", response);
        ref.convo.messages.push(response.data);
    },
    function failure () {
      $mdToast.show(
        $mdToast.simple().
        textContent("Failed to upload the file attachments").
        theme('error-toast'));
    }
  );
  }

};

Answer №1

After experimenting, I discovered that I could accomplish my goal by using Angular's $rootScope.$broadcast to send the return data back to the appropriate controller.

Although I'm not certain if this is the most conventional approach, it proved to be effective in my case.

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

"Enhance your website with autocomplete feature using the power of jQuery 1.4.2 and jQuery UI 1

Struggling to make jQuery autocomplete work. Despite searching for examples, most seem outdated. Modeled after a good example from the jQuery UI site but still can't get it to display data. My JSON data source is accessed via URL. [{ "pk": 1, "mo ...

Saving the index.html file to disk when the button is clicked

Is there a way to export the current HTML page to a file? I have attempted to achieve this using the following code, but it only works when the page is loaded and not with a button click. <?php // Start buffering // ob_start(); ?> <?php file_pu ...

Adding a custom script with wp_enqueue_script() upon form submission: Steps and guidelines

Currently, I'm working on a WordPress plugin that allows users to input inline scripts in a text-area on the plugin settings page, and then save it. My goal is to grab the submitted script and enqueue it in the header/footer of the theme. I've ...

Send an array variable as an argument to a function

Within the controller, I have defined two functions: $scope.historyMemberInit = function(fkhouseid) { $scope.fkhouseid = fkhouseid; $http({ method: 'post', url: 'House/member_list.php', data: {fkhouseid:$scope.fkhouseid ...

Using IF-ELSE statements in jQuery for DataTables

Is there a way to handle If else statements like method in the datatable plugin? Currently, when the 'data' variable returns a value, everything works correctly. However, if it is empty, I would like it to return either "from1" or "from2", which ...

Error Message: An unexpected token 'else' was encountered during the compilation of ejs files

Encountering an error message when attempting to implement dropdown functionality in the navbar. The error is as follows: SyntaxError: /Users/myfile/app/views/layouts/boilerplate.ejs:22 20| 21| <body class="d-flex flex-column vh-100" ...

Implementing a Custom HTML Attribute to the Script Tag in Vue JS

I have decided to switch from using Google Analytics to Plausible analytics for my website. However, I am encountering an issue with adding the Plausible script to the head of my Nuxt JS document. I have created a custom plugin to handle this, but the Vue ...

The onSubmit function is resistant to updating the state

Currently, I am facing a challenge while working on a form using Material-UI. The TextField component is supposed to gather user input, and upon submission, my handleSubmit() function should update the state with the user-entered information. Unfortunate ...

"SyntaxError: import statements can only be at the top level of a module" is the error message that I keep encountering.`

For the complete code, click here: https://github.com/vscodr/axios_issue After spending some time away from JavaScript working in Python, I decided to come back and try to tackle similar tasks using JS. However, I seem to be stuck at a very basic issue! D ...

Undefined will be returned if the data in AngularJS is not set within the $scope

I have developed a factory that contains a list of functions which are called when the state changes. On page load, I am calling dtoResource.rc1Step1DTO(). Although the function executes, when I check the result in the console, it returns undefined. Below ...

What is the best way to retrieve a FireStore document ID from an object?

I'm in the process of trying to reference an auto-generated firestore document ID in order to create a subcollection within it. The issue I'm facing is that although I can locate the document ID, I'm struggling to save it to a variable in a ...

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

Having trouble with AJAX integration when adding two products to the cart? Looking for a solution to resolve this issue?

In the cart view page, I have noticed that when there is only one product in the cart, I am able to increase and decrease the quantity by clicking on the + and - buttons. However, if I add more than one product to the cart, these buttons do not work for an ...

Alternative for Jquery: a new Hash Table solution using Prototype JS

Greetings everyone! I have experience as a prototype JS developer but now I am transitioning to jQuery for work/client reasons. One feature I really liked in Prototype was the Hash class, such as var h = new Hash();. However, I understand that jQuery doe ...

Issues arise when submitting the form on a web page with an MVC 4 partial view, causing the page

Scenario: I am currently working on a C#/MVC 4 project where I have a view that includes a partial view. The main view consists of a form with a submit button, and the partial view is initially hidden but can be displayed by selecting a checkbox. Problem: ...

Why is it that GetElements does not provide immediate results upon execution?

Just diving into the world of Javascript for the first time and experimenting with it on Chrome, but running into unexpected results. When I try: document.getElementsByTagName("h1") I anticipate seeing: <h1>tester h1 in body</h1> Instead, wh ...

The continuous progression of code execution

Having a background in Java, I decided to dive into learning Angular2 recently and have been working on it. However, I encountered a confusing situation in one of my projects that I could not figure out. For the pagination feature I was implementing, I ne ...

What are the steps to make ng-show functional in an AngularJS application?

I am attempting to implement a hover effect where an image is displayed over another image upon hovering over its container. I have been trying to achieve this using Angular and ng-show, but for some reason, the image with the ng-show attribute remains hid ...

ran into the error that this state is not a function

Every time I run my code, I encounter the error message this.setState is not a function. Can anyone offer guidance on how to fix this issue? Thank you! spiele.listUsers(params, function(err, data) { if (err) console.log(err, err.stack); else con ...