Question

我有一个应用程序使用angular-ui bootstrap模式（http://angular-ui.github.io/bootstrap/#/modal）从列表中搜索并选择一行。

通常使用angular-ui bootstrap模态，我们必须创建两个控制器（例如ModalDemoCtrl用于主模态，ModalInstanceCtrl用于模态窗口）。

在第二个控制器中，我们有两种方法：

$scope.ok = function () {
    $modalInstance.close($scope.selected.item); 
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

在几个地方重复（当我创建几个搜索模式时）。

如何创建一个包含这两个控制器的指令（或服务），并在其中创建这两个方法。

Answer 1

你错了 - 模态窗口有一个控制器。第二个是主页面，与模态无关。因此，如果你想在页面上有10个按钮来打开10种不同的模态，那么你将拥有11个控制器。

对于只显示消息或要求确认操作的模态，最好有服务，所以你可以写Myservice.showModal（＆＃39;你确定吗？＆＃39;，函数callbackafterok（）{... }）。

如果你不喜欢重复$ modalInstance.close - 为带有ng-click绑定的按钮制作简单指令，写一下：

<button closeModalWithData="" >Ok</cancel>

或者只是 <modalOk/>使用模板<button ng-click="ok()">Ok</button> ...

Answer 2

Petr Averyanov的回答是正确的。我创建了一个指令，并在Angular UI模态指令的文档末尾，当我们创建一个模态窗口时，一些属性添加到$ scope。其中一个属性是$ close，我们可以用它来关闭模态。像这样：

    .directive('closeModal', function() {
        return {
            restrict: 'E',
            template: '<button ng-click="$close()">Cancel</button>'
        };
    })

从angularui模态创建搜索模态指令

2 个答案: