CODEWITHSUNDEEP
angularjsangular-material
Ezequiel Ramiro
Ezequiel Ramiro

Reputation: 760

mdDialog - confirm button not working

I have followed the official Angular Material's documentation but I cannot make it work. I can't see what is wrong with my code. mdDialog not even shows up and goes straigth to my cancel function.

My Code

$scope.createInviteDialog = function(ev, line, index){

    var parentEl = angular.element(document.body);
    var confirm = $mdDialog.show({
        parent: parentEl,
        locals: {
            line: line,
            index: index
            },
        targetEvent: ev,
        template:
     '<md-dialog aria-label="List dialog">' +
     '  <md-dialog-content>' +
     '<md-input-container class="md-block">' +
     '<label>Write something about you!!</label>' +
     '<textarea ng-model="mensaje" md-maxlength="120" rows="4" md-select-on-focus></textarea>' +
     '</md-input-container>' +
     '<md-dialog-actions>' +
     '    <md-button ng-click="cancel()" class="md-primary">' +
     '      Cancelar' +
     '    </md-button>' +
     '<md-button ng-click="invite("pep")" class="md-primary">' +
     '      Crear postulacion!' +
     '    </md-button>' +
     '</md-dialog-actions>' +
     '</md-dialog>'})
    .then(function(invite){
        console.log('create invite');
    }, function(){
        console.log('cancel invite');
    });
};

Console Log

'cancel invite'

Upvotes: 0

Views: 1580

Answers (1)

Leandro
Leandro

Reputation: 190

This is from the example from angular material with a few changes, for example, you can put the html code directly as a string in .htmlContent and it will show inside the dialog.

$mdDialog.confirm()
    .title('Title')
    .htmlContent(html)
    .ariaLabel('Lucky day')
    .ok('Confirm')
    .cancel('Continuar con el envio');
$mdDialog.show(confirm).then(function() {},function(){})

If you absolutely need to have scopes inside the dialog, I would recommend creating a pre-rendered dialog.

$mdDialog.show({
                controller: CustomController,
                templateUrl: '__path/custom.html',
                targetEvent: ev,
                clickOutsideToClose: true
            })
            .then(function(answer) {}, function() {});

function CustomController($scope, $mdDialog) {

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

The only hassle in this is that you need to create a new html, with no body,html tag or anything, just a with how you want the dialog to be , but with this you can receive anything from the CustomController you need. Note that the customControllers scope wont be the same as you controllers scope. For this google the use of 

vm = this;

Upvotes: 1

Related Questions