angularjs从指令调用模态对话框

angularjs从指令调用模态对话框,angularjs,angularjs-directive,angular-ui-bootstrap,Angularjs,Angularjs Directive,Angular Ui Bootstrap,我已经创建了一个打开模式对话框的指令。代码如下: [编辑]JSFIDDLE此处: 问题:关闭按钮不能关闭模式 angular.module('person.directives'). directive("person", function($dialog) { return { restrict: "E", templateUrl: "person/views/person.html", replace: true, scope: { myPer

我已经创建了一个打开模式对话框的指令。代码如下:

[编辑]JSFIDDLE此处:

问题:关闭按钮不能关闭模式

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);
                }
            });
        }
    }
}
}))

那很好。现在,在对话框中,我使用另一个指令:

 <search-person></search-person>

而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);
        }
    }
}
});
angular.module('person.directions')。指令(“searchPerson”,函数($dialog){
返回{
限制:“E”,
模板:“一些模板”,
作用域:{},
链接:函数(范围、元素、属性){
},
控制器:功能($scope)
{
$scope.close=函数(结果)
{
$dialog.close(结果);
}
}
}
});
但是$dialog.close(结果)不起任何作用。我注意到$scope.close为空。 我怀疑这和注射有关。我正在将$dialog注入searchPerson指令,而我想我应该使用从person指令打开的对话框。我只是不知道。。。有什么想法吗

[编辑2]

我已经将模态的模板替换为和指令searchPerson的模板。现在我没有范围问题(请参阅更新的JSFIDLE)。但是“关闭”按钮仍然不起作用!错误是:

Object #<Object> has no method 'close'
Object#没有方法“close”

似乎$dialog在searchPerson指令中没有正确插入

我认为函数参数中的$dialog是$dialog服务,而不是dialog对象的实例。这就是为什么没有close方法。

@Joe,实际上它是dialog对象,而不是$dialog服务。在本例中,$dialog服务的open()方法向分配的控制器中注入对对话框的引用


经过大量的修改,我最终解决了这个问题,将整个模式移动到searchPerson指令本身。它们共享同一个控制器,这很好。

我也有类似的需求,所以我只是将对话框的控制器(我称之为“dialogController”)插入到$scope.opts对象中。 像这样:

.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,我知道你已经解决了这个问题,但是这段代码可能对其他人有用。

什么是$dialog你能发布一个fiddle$dialog吗?它来自ui引导程序,是angularjs的扩展。它是内置的。该部分在person指令中运行良好。贴小提琴不容易,我会看看我能做什么,我已经弄明白了。关闭按钮实际上不在searchPerson指令模板中。它位于模式模板中,其中包含searchPerson指令。因此,searchPerson指令和close按钮不属于同一范围。问:我如何处理searchPerson指令中的点击按钮???我刚刚更改了JSFIDLE,所以我将一个控制器传递给ui dialog指令。但是没有运气,它不会改变任何东西……(你试过$discover吗?替换它有点旧,但是你能告诉我们你是如何做到的吗?小提琴?