Add a component from Material Design Dialog to the primary controller

One issue that I am facing is integrating the object returned by a dialog created with Angular Material Design Dialog ($mdDialog) into a collection present in the main controller of my application. Is there a feasible solution for achieving this?

angular.module("module").controller("mainController", function ($scope, $mdDialog) {
    $scope.Users = [];

    function OpenEditWindow(userToEdit) {
        $mdDialog.show({
            templateUrl: 'Views/user.html',
            controller: 'UserDialogController',
            clickOutsideToClose: true,
            locals: { // Sending values to the dialog controller
                User: userToEdit
            }
        }).then(function (data) {
            // Trying to add the edited object to the main controller's collection for display
            $scope.Users.push(data); // ******** ISSUE HERE
        });
    }
});

angular.module('module')
.controller('UserDialogController', function ($scope, $mdDialog, User) {
    $scope.User = User;

    $scope.Save = function () {
        $mdDialog.hide($scope.User);
    }
});

Answer №1

If you consolidate your data and develop a service model to maintain the state of your user throughout your application, it can be beneficial. This service can be injected into your controller like any other dependency.

angular.module('module')
.controller('UserDialogController', function ($scope, $mdDialog, User, UserModel) {
    $scope.User = User;

    $scope.Save = function () {
        $mdDialog.hide($scope.User);
    }
});


angular.module('module').factory('UserModel', function () {

    var userModel = this;

    userModel.set = function(){
     ...
    }

    return userModel;
});

Since services are singletons, you will always have access to the most up-to-date information.

Consider following a style guide to enhance your code quality and logic. One example is John Papa's Angular Style Guide

Answer №2

After calling $mdDialog.show, you will receive a promise back. Make sure to properly place your then function for handling the returned data. Additional information on this can be found in the angular material documentation here

angular.module("module").controller("mainController", function ($scope, $mdDialog) {
    $scope.Users = [];

    function OpenEditWindow(userToEdit) {
        var promise = $mdDialog.show({
            templateUrl: 'Views/user.html',
            controller: 'UserDialogController',
            clickOutsideToClose: true,
            locals: { // Sending values to the dialog's controller
                User: userToEdit
            }
        });

        promise.then(function (data) {
            // Add the edited object to the main controller's collection for display
            $scope.Users.push(data); // ******** ISSUE HERE
        });
    }
});

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

Is there a way to incorporate an SSL certificate into a JavaScript POST request?

I need to send a post request to an endpoint using a SSL certificate in either typescript or javascript. This is for a project that I am currently working on with Ionic 3. ...

What is the reason for the inability to input a null byte in a file when using ascii mode with node.js?

Below is the code snippet I have written: var fs = require('fs'); var fp = fs.openSync('binary.txt', "w"); var byte = '\0'; fs.writeSync(fp, byte, null, 'ascii'); However, upon execution, when I check the con ...

What is the best way to convert user input text into a JSON request?

How can I utilize the text entered inside an input field for a JSON request? $("document").ready(function() { var search = $('#input').val() var api = "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&a ...

Is it possible to override values set in the constructor(props) in React? If not, what is the best way to set defaults that can be overwritten later?

I'm confident I know the solution to this problem because my setState({}) seems to have no effect. This is the constructor code that I currently have: constructor(props) { super(props); this.state = { percentiles: { incN ...

Error message: Component nesting/recursion error, component not registered

I am facing an issue while using the component within itself in Nuxt.js. I'm getting the following error: [Vue warn]: Unknown custom element: - Did you register the component correctly? For recursive components, make sure to provide the "name& ...

After compiling, global variables in Vue.js 2 + Typescript may lose their values

I am currently working on a Vue.js 2 project that uses Typescript. I have declared two variables in the main.ts file that I need to access globally throughout my project: // ... Vue.prototype.$http = http; // This library is imported from another file and ...

Exploring the contrast between click event bound techniques in jQuery

Can you explain the variances between these two approaches for click event handling? $('#save').click(function() { }); & $(document).on('click', '#save', function() { }); ...

What type of loader is required to manage the output from these loaders?" - What specific loader should be used in this case?

I recently initialized a new react application using the create-react-app command. Upon attempting to utilize a react package by importing its default component, I encountered a compilation error: Compiled with problems: ERROR in ./node_modules/@USER-NAME ...

Can you provide guidance on downloading a CSV file from a Java Spring controller via GUI while on the move?

Just graduated from college and diving into Software Development. I'm currently working on my first major project. I'm trying to enable users to download a CSV file by selecting the start and end dates of the project. The downloaded file should ...

Adjusting a data point as v-model is updated

I'm working on a text input that is using the v-model to bind its value to data. I also need to trigger my parse() function whenever the value of this v-model changes, so that I can update an array within the data object. <div id="app"> < ...

Update the table following each task

When working with AngularJS, I am utilizing ng-repeat to populate a table from data received via a REST service. After each operation, I need to refresh the table without reloading the entire page. While I can achieve a complete page refresh using the lo ...

An issue arose while resolving symbol values statically. The function 'ɵmakeDecorator' cannot be called as function calls are not allowed in this context

I have developed a unique "Angular component library" that I refer to as ACL Now, I am incorporating this library into another project. Initially, when I execute ionic-app-scripts build, it completes successfully However, when I run ionic-app-scripts b ...

The appearance of a Magento website becomes disordered, causing page elements to appear scattered and

Recently, I've encountered an issue with my Magento website where after making changes, sometimes the CSS and JavaScript don't load properly. This results in all the elements being misplaced and the website appearing messy. Even after trying to c ...

Incorporating a conditional statement into the Array.from() method

Here is the code snippet that I am currently working with: AllDays= Array.from(moment.range(startDate, endDate).by('day')).map(day => day.format('YYYY-MM-DD')); I want to enhance this code by adding a conditional statement so that i ...

Encountering the issue of receiving an undefined class when using the img tag in a

In my React.js project, I encountered an issue where the class for the img tag is appearing as undefined. The problem lies within the Header.jsx component. In this file, I am using the <img> tag but the CSS properties are not being applied to the ima ...

I am looking to create a unique object by searching for key-value pairs in an array containing 'n' number of objects, using either lodash or typescript

Here is my plan: We have an array of objects retrieved from the database. Let's focus on one item: this.usersObj. @Input() inlinetext: string; <<-- This represents the input field from the UI public usersObj: string[]; <<-- Type definit ...

How to eliminate space preceding a div using jQuery?

I am trying to modify the following code snippet: <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> Is there a method for me to eliminate the space before div "three" in order to achieve this result: ...

Upon completing the registration process, the username is not visible to me until I either refresh the page or log

After successfully registering, I am taken to the dashboard page where a welcome note with the user's name should appear. However, there is an issue as the user name is not displayed until I refresh or log in again. Below are snippets of my registrati ...

What methods are used to maintain the state of the express req.session object?

My journey into learning Node and Express is just beginning, and I am currently trying to comprehend the flow of code with Express. Imagine you have code like this in a session.js file: app.post('/session', notLoggedIn, function(req, res) { ...

.submit fails to function when the bound object has been updated via an ajax call

I managed to implement an AJAX commenting system where, upon clicking the Post Comment button, an ajax call is made instead of submitting the form traditionally. Everything was working smoothly until I tried refreshing the page with the comment submit butt ...