Invoke the function within $mdDialog from the main controller

I have a requirement to execute a method within $mdDialog. This method is passed from the parent component to my directive.

<get-data action="getData()" ></get-data>

To access the method in my get-data directive.

function customDirective() {

  return {
    restrict: 'E',
    scope: {
      action: '&?'
    },
    templateUrl: "",
    controller: function($scope) {
      'ngInject';

}

Inside my get-data directive, I'm using $mdDialog.

  $scope.submit = function(){
    $mdDialog.show({
      templateUrl: '',
      escapeToClose: true,
      clickOutsideToClose: true,

      controller: function($scope) {

        $scope.performAction = function(){
          $scope.action()
        }

      }
    })
  }

I am attempting to invoke the getData() method within it, but encountering the error $scope.action() is not a function

Answer №1

$dialog features a unique scope that operates independently from your directive's scope. To leverage the original scope within $dialog's controller, consider saving a reference to it and using it as needed.

 $scope.save = function(){
    var mainScope = $scope;
    $mdDialog.show({
      templateUrl: '',
      escapeToClose: true,
      clickOutsideToClose: true,
      controller: function($scope) {
        $scope.testFunction = function(){
          mainScope.callback();
        }
      }
    })
  }

Alternatively, you can pass the callback function as a parameter:

$scope.save = function(){
    $mdDialog.show({
      templateUrl: '',
      escapeToClose: true,
      clickOutsideToClose: true,
      locals: {
        callback: $scope.callback
      },
      controller: function($scope, callback) {
        $scope.testFunction = function(){
          callback();
        }
      }
    })
  }

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

A guide on extracting data from a Bootstrap table and removing a specific row

In my ejs file, I have a Bootstrap table set up as shown below. I am trying to implement a feature where clicking a button will trigger my del() function to delete the selected row. However, I am facing an issue where my function does not receive the &apos ...

Embed an event into an HTML div that is not editable

How can I bind the paste event on a div to grab an image from the clipboard and assign it to an Angular scope variable? This solution works in Chrome, but not in IE 11 without adding the contenteditable=true attribute. However, using content editable break ...

Converting an Angular promise into a jQuery deferred object: A guide

I am looking for a way to send promises from my module/sdk to non-angular JavaScript. If I return a promise to jQuery, it seems like I should use a jQuery deferred object. Is there a way to convert an Angular promise to a jQuery promise/deferred object? A ...

What is the appropriate time to end a connection in MongoDB?

Utilizing Node.js Express and MongoDB for my API, I encountered an issue with the mongoClient connection. The data fetching process worked smoothly at first, but without refreshing it threw an error stating "Topology is closed." const express=require("e ...

Troubleshooting the malfunctioning array of objects in Angular

I'm facing an issue with two objects. First object usersHotel usersHotel:[ {id:0, linked:false,hotel: {code:1, namehotel:'r1'} }, {id:1,linked:false,hotel: {code:2, namehotel:'n1'} }, {id:2, linked:false ...

Error 401 encountered while accessing the Binance API using Ionic and Angular

function makePrivateCall(apiSecret, apiKey, endpoint, data = null, isGetRequest = true) { const timestamp = Date.now(); const recvWindow = 60000; //maximum allowed, default 5000 var obj = { apiSecret, ...data, timestamp, ...

jQuery loading and updating

I am faced with a scenario where I have both a 'test.html' and a 'test.php' files. The content of 'test.html' is as follows: <html> <head> <script type="text/javascript" src="/js/jquery-1.8.2.js">< ...

View the outcome of a form submission button within Adobe Analytics

In the classic version of my form, I have a submit button. <form action="" name="frm" method=""> <input type="submit" value="submit"> </input> I implemented a jQuery command to track successful form submissions in Adobe Analytics and ca ...

unable to utilize the If - Else statement for checking element existence in Javascript

After writing a JavaScript function to create a table in both HTML and JS, I encountered an issue. When I click submit, the table is created, but if I click submit again, it creates another table. I attempted to use if-else statements in the function, but ...

Converting RowDataPacket to an array in Node.js and MySQL API, learn how to convert a RowDataPacket from the MySQL API into an array

Hello, I need assistance with converting my row data packet into an array of arrays or nested arrays. Please provide code snippet below: router.get('/getPosts/:user_id', (req, res, next) => { connection.query('SELECT * FROM files WHERE ...

Display only the initial item in the ng-repeat loop

Is there a way to display only the first element in Angular without using ng-repeat? I have been trying to achieve this using ng-repeat as shown below: <div ng-repeat="product in products" ng-show="$first"> <div>{{ product.price }}</di ...

I encountered a 404 Error message while attempting to access a specific express route

My Angular CLI generated app is running with an Express.js and MongoDB server. After running npm start, I can access http://localhost:3000, which routes to my homepage. The other links on the navbar work well to control routes, e.g., http://localhost:3000/ ...

nearest 0.10 rounding up

I'm looking for assistance on how to round up to the nearest 0.10 with a minimum of 2.80. var panel; if (routeNodes.length > 0 && (panel = document.getElementById('distance'))) { panel.innerHTML = (dist/160 ...

get data from a JSON array with no specific name on the provided URL

Struggling to extract specific values from a JSON file located at the following URL: The content of the URL data is as follows: [ { "key":{ "parentKey":{ "kind":"user", "id":0, "name":"test 1" }, ...

The information submitted through a Django form is being beautifully displayed in an HTML table

I'm having trouble displaying variable values in an HTML table after submitting form data using the fetch API. The form data is successfully fetched in views.py, but I can't seem to send it back to the HTML file to show the data on a table. If I ...

Utilizing a file from external sources in WebPack 1.x beyond the webpack root directory

In my project structure, I have the following setup: Root Project1 package.json webpack.config Project2 package.json webpack.config Common file1.js I need to use file1.js in each project. The webpack v ...

Is there a way to make Express.js pass parameters with special characters exactly as they are?

I am currently working on a project within the freeCodeCamp "API and Microservices" curriculum that involves using Express.js to handle routes. The project itself is relatively straightforward, with some pre-defined routes and others that need to be creat ...

Vue: Develop a master component capable of displaying a sub-component

Is there a way to design a main component that is able to accept and display a subcomponent? Take the following scenario for instance: <Container> <Item/> <Item/> <SubMenu/> <Btn/> </Container> ...

Dealing with non-existent property in TypeScript while working with JavaScript libraries

Currently, I'm utilizing TypeScript in a Vue.js application and aiming to implement the drop event to initiate image uploading as shown below: handleDOMEvents: { drop(view, event) { const hasFiles = event.dataTransfer && ...

Error: The function $(...).maxlength is not recognized - error in the maxlength plugin counter

I have been attempting to implement the JQuery maxlength() function in a <textarea>, but I keep encountering an error in the firefox console. This is the code snippet: <script type="text/JavaScript"> $(function () { // some jquery ...