如何申请一个可拖动的指令使用angularJS来引导模式？ [英] How can i apply a draggable directive to bootstrap modal using angularJS?

问题描述

我使用的引导模式在我的角度应用，它工作正常。我需要使它可拖动和调整大小，所以我定义的指令。现在的问题是它得到应用模式窗口里面的内容，因此，模态窗口变得透明。

I am using bootstrap modal in my Angular Application, it works fine. I need to make it draggable and resizeable, so i have defined a directive. The issue now is it getting applied to the content inside the modal window, hence the modal window becomes transparent.

可拖动指令打开窗户时，我怎样才能分配给模态窗口？
这里是code，

how can i assign the draggable directive to the modal window when opening the window? Here is the code,

HTML：

<div ng-controller="CustomWidgetCtrl">
    <div class="box-header-btns pull-right" style="top:10px" >
        <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
</div>
</div>

App.js：

var routerApp = angular.module('DiginRt',  ['ui.bootstrap','ngRoute']);
routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal',
  function($scope, $modal) {

    $scope.openSettings = function(widget) {
          $modal.open({
            scope: $scope,
            templateUrl: 'chart_settings.html',
            controller: 'chartSettingsCtrl',        
            resolve: {
              widget: function() {
                return widget;
              }
            }
          });
        };
    }
    ])

图表设置是另一个HTML页面。这是我可拖动的指令。

Chart Settings is another HTML page. Here is my Draggable directive.

更新：

我有更新 Plunker问题

问题：

Issue:

推荐答案

我无法找到一个方法来将指令添加到由开模态的UI引导，因为它封装了模板，模态，对话框。

I couldn't find a way to add the directive to the modal opened by ui-bootstrap, as it wraps the template with a modal-dialog..

所以，我所做的是设置拖动使用以下code模态，对话框本身（而不是指令）的事件。

So what i did is setting the events for drag to the modal-dialog itself(not the directive) using the following code.

我知道这是不是事件添加到另一个元素指令内，但不是一个坏的做法，以及在这样的情况下，最好的做法，在那里你不能直接设置指令的元素。

I know it is not the best practice to add events to another element inside a directive but not a bad practice as well in cases like these, where you cant set a directive directly to the element.

这样做的原因是因为 UI的引导犯规提供一种方式来指令添加到模式-对话框在 modal.open 函数

the reason doing this is because ui-bootstrap doesnt provide a way to add a directive to the modal-dialog on modal.open function

这里是code。在指令的开始放：

here is the code to be put at the start of the directive:

element= angular.element(document.getElementsByClassName("modal-dialog"));

和 plunkr

这篇关于如何申请一个可拖动的指令使用angularJS来引导模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！