'angularjs calling modal dialog from directive

I've created a directive to open a modal dialog. Here's the code:

[EDIT] JSFIDDLE HERE: http://jsfiddle.net/graphicsxp/fcQZk/8/

PROBLEM: THE CLOSE BUTTON DOES NOT CLOSE THE MODAL.

angular.module('person.directives').
directive("person", function($dialog) {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },
    link: function (scope, element, attrs) {

    },
    controller: function ($scope)
    {            
        $scope.opts = {
            backdrop: true,
            keyboard: true,
            backdropClick: true,
            templateUrl: 'person/views/searchPerson.html'
        };

        $scope.openDialog = function () {
            var d = $dialog.dialog($scope.opts);
            d.open().then(function (result) {
                if (result) {
                    alert('dialog closed with result: ' + result);
                }
            });
        }
    }
}

});

That works fine. Now, in the dialog, I use another directive:

 <search-person></search-person>

and the js : 

angular.module('person.directives').directive("searchPerson", function ($dialog) {
return {
    restrict: "E",
    template: "<div>some template</div>",
    scope: {},
    link: function (scope, element, attrs) {

    },
    controller: function ($scope)
    {
        $scope.close = function (result)
        {
            $dialog.close(result);
        }
    }
}
});

But $dialog.close(result) does not do anything. I've noticed that $scope.close is null. I suspect it's got something to do with the injection. I'm injecting $dialog into the searchPerson directive, whereas I guess I should be using the dialog opened from the person directive. I just don't know... Any idea ?

[EDIT 2]

I've replaced the template of the modal by and the template of the directive searchPerson. Now I don't have scope issue (see updated jsfiddle). But the close button still doesn't work ! the error is:

Object #<Object> has no method 'close'

seems like the $dialog is not injected properly in the searchPerson directive ....

angularjsangularjs-directiveangular-ui-bootstrap


Solution 1:[1]

I think the $dialog in the parameters of function is the '$dialog' service, not the instance of your dialog object. That's why there is not close method.

Solution 2:[2]

@Joe, actually it is the dialog object, not the $dialog service. In this case, the open() method of the $dialog service, injects into the assigned controller a reference to the dialog.

After lot of fiddling around, I ended solving the problem by moving the entire modal into the searchPerson directive itself. And they share the same controller, which is fine.

Solution 3:[3]

I had a similar need, so I just inserted the dialog's controller (which I call "dialogController" ) into the $scope.opts object. Like this:

.directive('infoDialog', function($dialog) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            elm.bind('click', function() {
                scope.$apply(function() {
                    var info = { title:   attrs.title, content: attrs.content };
                    scope.openDialog(info);
                });
            })
        },
        controller: function($scope) {
            var dialogController = function($scope, dialog, info) {
                $scope.close = function(){ dialog.close(); };
                if(info){ $scope.info = info; }
            };

            $scope.opts = {
                backdrop:       true,
                keyboard:       false,
                backdropClick:  true,
                backdropFade:   false,
                resolve: { },
                controller:     dialogController,
                templateUrl: 'partials/dialogs/blank.html'
            };

            $scope.openDialog = function (info) {
                $scope.opts.resolve.info = function(){ return info; };
                var d = $dialog.dialog($scope.opts);
                d.open();
            }
        }
    };
});

@Sam, I see you have solved this already, but this code might be useful for someone else.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joe Chen
Solution 2 Sam
Solution 3 Vitae Aliquam

Related Questions