angularjs从指令调用模态对话框答案

【问题标题】：angularjs calling modal dialog from directiveangularjs从指令调用模态对话框
【发布时间】：2022-04-22 06:00:50
【问题描述】：

我创建了一个指令来打开一个模式对话框。代码如下：

[编辑] 此处为 JSFIDDLE：http://jsfiddle.net/graphicsxp/fcQZk/8/

问题：关闭按钮不会关闭模式。

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

但是 $dialog.close(result) 没有做任何事情。我注意到 $scope.close 为空。我怀疑这与注射有关。我将 $dialog 注入到 searchPerson 指令中，而我想我应该使用从 person 指令打开的对话框。我只是不知道...有什么想法吗？

[编辑 2]

我已将模态的模板替换为指令 searchPerson 的模板。现在我没有范围问题（请参阅更新的 jsfiddle）。但是关闭按钮仍然不起作用！错误是：

Object #<Object> has no method 'close'

似乎 $dialog 没有正确注入到 searchPerson 指令中......

【问题讨论】：

$dialog 是什么，你能发个小提琴吗
$dialog 来自 ui-bootstrapper，它是 angularjs 的扩展。它是内置的。该部分在 person 指令中工作正常。发个提琴不容易，我看看能做些什么
好的，我想通了。关闭按钮实际上不在 searchPerson 指令模板中。它位于模态模板中，其中包含 searchPerson 指令。因此，searchPerson 指令和关闭按钮不属于同一范围。问题：如何处理 searchPerson 指令中的按钮点击？？？
我刚刚更改了 jsfiddle，所以我将控制器传递给 ui-dialog 指令。但没有运气，它不会改变任何东西.....:(jsfiddle.net/graphicsxp/fcQZk/8
你试过$dismiss吗？将

标签： angularjs angularjs-directive angular-ui-bootstrap

【解决方案1】：

我认为函数参数中的 $dialog 是“$dialog”服务，而不是您的对话框对象的实例。这就是为什么没有关闭方法的原因。

【讨论】：

【解决方案2】：

@Joe，实际上是对话对象，而不是 $dialog 服务。在这种情况下，$dialog 服务的 open() 方法会向分配的控制器注入对对话框的引用。

经过大量的摆弄，我最终通过将整个模态移动到 searchPerson 指令本身来解决问题。而且它们共享同一个控制器，这很好。

【讨论】：

它有点老了，但是你能告诉我们你是怎么做到的吗？小提琴？

【解决方案3】：

我也有类似的需求，所以我只是将对话框的控制器（我称之为“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，我看到你已经解决了这个问题，但是这段代码可能对其他人有用。

【讨论】：