我在我的 Angular 应用程序中使用 Bootstrap 模式,它工作正常。我需要让它可以拖动和调整大小,所以我定义了一个指令。现在的问题是它被应用于模态窗口内的内容,因此模态窗口变得透明。
打开窗口时如何将可拖动指令分配给模态窗口? 这是代码,
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 页面。这是我的 Draggable 指令。
更新:
我已将问题更新为 Plunker
问题:
最佳答案
我找不到将指令添加到由 ui-bootstrap
打开的模态中的方法,因为它用模态对话框包裹了模板。
所以我所做的是使用以下代码将事件设置为拖动到模态对话框本身(而不是指令)。
我知道将事件添加到指令内的另一个元素不是最佳做法,但在这种情况下也不是坏做法,在这种情况下您不能直接将指令设置到元素。
这样做的原因是因为 ui-bootstrap不提供在 modal.open
函数上向 modal-dialog
添加指令的方法
这是放在指令开头的代码:
element= angular.element(document.getElementsByClassName("modal-dialog"));
和 plunkr
关于javascript - 我如何使用 angularJS 将可拖动指令应用于 Bootstrap 模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27942209/