如何使用服务启动模态（指令）答案

【问题标题】：How to use a service to launch a modal (directive)如何使用服务启动模态（指令）
【发布时间】：2014-02-14 11:41:25
【问题描述】：

我是 Angular 的新手。不知道我在这里缺少什么以及从哪里开始寻找。

我的应用程序中需要可重用（Twitter Bootstrap）模式对话。我看过 Angular UI，但我想自己构建它们 - 也能够理解它是如何工作的。

我有：

在我看来：

<div cng-modal title="Create new user" submit="saveNewUser()">
    <div ng-include=" 'templates/newUserForm.html' "></div>
</div>

我的指令：

UserManagerApp.directive('cngModal', function () {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
            title: '@title',
            submit: '&'
        },
        templateUrl: 'templates/modal.html',
        controller: function($scope, $element, $attrs, $location) {
            $scope.submitHandler = function() {
                $scope.submit();
            };
        },
        link: function (scope, element, attrs) {
            console.log(element);
        }
    };
});

我的 modal.html 模板：

<div id="newUserModal" class="modal hide" data-backdrop="static" tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>{{ title }}</h3>
  </div>

  <div class="modal-body" ng-transclude></div>

  <div class="modal-footer">
    <div class="btn-group">
      <button type="button" class="btn btn-primary btn-action btn-submit" ng-click="submitHandler()"><i class="icon-ok"></i> Save</button>
      <button type="button" class="btn btn-action btn-cancel" data-dismiss="modal"><i class="icon-remove"></i> Cancel</button>
    </div>
  </div>

最后（部分）我的控制器：

UserManagerApp.controller('UserManagerCtrl', ['$scope', 'ajaxService', '$route', function($scope, ajaxService, $route) {
    $scope.showNewUserModal = function () {
        $('#newUserModal').modal('show');
    };

    $scope.saveNewUser = function () {
        console.log('saving user');
    };
}]);

问题

现在我的模态打开了，因为我在 modal.html 中为它提供了 ID“newUserModal”，并且在我的控制器中 showNewUserModal() 触发器通过其 ID 完全打开该模态。

我想要一个服务，我可以从我的控制器中调用它来根据我的指令构造一个新的模式并打开它。无需分配任何 ID。 .... 这怎么可能？

感谢您为我指明正确的方向。

【问题讨论】：

既然你谈到了 ui-bootstrap。我们有一个很好的 $modal（如果你不想要就不要使用），但要了解我们是如何做到的。

标签： javascript angularjs

【解决方案1】：

在 ui-bootstrap 的 $modal 中，我们分 5 块执行类似的操作（当然你的也可以很简单）。

我们有一个 stackMap 来堆叠我们的对话框（你可以有多个）。

然后我们有一个用于背景的指令和一个用于模态本身的指令。

我们有一个工厂将准备一个新的模态，也就是说，获取它的模板，解析它的解析，如果需要，创建一个控制器，一个新的范围......当它准备好时，我们使用另一个工厂（根据目的有一个工厂很好），它将手动创建一个新的背景和模型，例如：

var angularDomEl = angular.element('<div modal-window></div>');
angularDomEl.attr('window-class', modal.windowClass);
angularDomEl.attr('index', openedWindows.length() - 1);
angularDomEl.attr('animate', 'animate');
angularDomEl.html(modal.content);
var modalDomEl = $compile(angularDomEl)(modal.scope);

然后我们只需要将它附加到正文中。

所以我们的想法是建立一个工厂来手动创建元素并对其进行配置，然后将其附加到正文中。

我强烈建议您深入阅读 $modal 并了解我们在那里所做的工作。

【讨论】：