angularjs calling modal dialog from directive

Question

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 ....

Answer 1

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.

Answer 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.

Answer 3

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.