从 angularui modal 创建搜索模式指令答案

【问题标题】：Create search modal directive from angularui modal从 angularui modal 创建搜索模式指令
【发布时间】：2015-02-24 22:41:29
【问题描述】：

我有一个应用程序，它使用 angular-ui 引导模式 (http://angular-ui.github.io/bootstrap/#/modal) 从列表中搜索并选择其中一行。

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

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

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

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

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

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

【问题讨论】：

除了创建指令或服务之外，您可以为主屏幕和模式屏幕使用两个通用控制器。这更有意义。您可以在初始化之前根据您的要求配置主屏幕和模式屏幕。因此，您的两个控制器代码都将适用于您的配置。它将解决您的问题，无需重复正确的代码。

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

【解决方案1】：

你错了——模式窗口只有一个控制器。第二个用于主页，与模式完全无关。所以如果你想在页面上有 10 个按钮来打开 10 个不同的模态，那么你将有 11 个控制器。

对于只显示消息或要求确认操作的模式，最好有服务，所以你可以写 Myservice.showModal('Are you sure?', function callbackafterok() {...})。

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：