daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 520 forks source link

Injecting controller in $mdEditDialog #569

Open elgurinn opened 7 years ago

elgurinn commented 7 years ago

I am using angular 1.x with typescript and I am trying to implement a custom $mdEditDialog.show().

The options for the edit dialog:

if (item) {
                showConnectionStringDialog = {
                    controller: 'ca.pages.registry.dialogs.RegistryConnectionStringDialog',
                    controllerAs: 'rcsd',
                    bindToController: true,
                    targetEvent: event,
                    scope: {
                        $scope: this.$scope
                    },
                    locals: {
                        test1: 'test1'
                    },
                    templateUrl: 'src/pages/registry/dialogs/registry.connection-string.dialog.html',
                    resolve: {
                        connectionStringa: this.getConnectionString(item).then((response: any) => {
                            let connectionString = '';
                            const vals = Object.keys(response).map(key => response[key]);
                            for (let i = 0; i < vals.length - 2; i++) {
                                connectionString += vals[i];
                            }
                            return connectionString;
                        })
                    }
                };
            }

But I cannot access any functions or variables through resolve, locals or built in functions in the registryconnectionstring controller how do I do that?

Here is my RegistryConnectionString controller:

/// <reference path="../../../../typings/index.d.ts" />

// Page: Registry
module ca.pages.registry.dialogs {
    'use strict';

    // Import models

    // Interface: Registry dialog
    interface IRegistryConnectionStringDialog {
        // Variables
        lala2: string;

        // Public methods
        test(): any;
    }

    // Class: Registry dialog
    class RegistryConnectionStringDialog implements IRegistryConnectionStringDialog {

        // ########## Setup ###########

        // Variables
        lala2: string;

        // Dependency injection
        static $inject: string[] = ['$scope', '$mdDialog', '$translate','$log', '$element'];

        // Constructor
        constructor(private $scope: ng.IScope,
            private $mdDialog: ng.material.IDialogService,
            private $translate: ng.translate.ITranslateService,
            private $log: ng.ILogService,
            private $element: ng.IRootElementService) {
            this.lala2 = 'what are you doing';
            console.log(this.lala2);
            console.log(this.$scope);
        }

        // ########## Public methods ###########
        public test = () => {
            console.log('testing');
            this.$element.remove();
        }

        // ########## Private methods ###########
    }

    // Controller
    angular.module('CloudAnalytics').controller('ca.pages.registry.dialogs.RegistryConnectionStringDialog', RegistryConnectionStringDialog);
}

Is it possible to get a demo of the $mdEditdialog.show method?

The html file:

<md-edit-dialog >
    <div layout-padding>
        <md-input-container md-no-float>
            <input name="favoriteColor" disabled ng-model="rcsd.connectionString" required placeholder="Non-Floating Label">
        </md-input-container>
        {{rcsd.test1}}
        {{lala2}}
        {{rcsd.lala2}}
        {{rcsd.connectionString}}
    </div>
    <div layout="row" layout-align="end" class="md-actions">
        <md-button ng-click="rcsd.test()" class="md-primary">Close</md-button>
    </div>
</md-edit-dialog>