个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个包裹在指令中的 angularUi 模式窗口:
html:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="main.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div my-modal="{ data: 'test2'}">test2</div>
</body>
</html>
JavaScript:
angular.module('plunker', ['ui.bootstrap', 'myModal']);
angular.module("myModal", []).directive("myModal", function ($modal) {
"use strict";
return {
template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
replace: true,
transclude: true,
scope: {
rowData: '&myModal'
},
link: function (scope, element, attrs) {
scope.clickMe = function () {
$modal.open({
template: "<div>Created By:" + scope.rowData().data + "</div>"
+ "<div class=\"modal-footer\">"
+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
+ "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
+ "</div>",
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ test: "test"});
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
}
}
};
});
骗子:http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
我想让模态可拖动且可调整大小。我通过互联网搜索并找到了以下实现draggable的解决方案:
http://plnkr.co/edit/jHS4SJ?p=preview
这是重要的部分:
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});
但无法使其适用于我的示例。有人可以帮我弄这个吗？我想知道是否可以使用包装在指令中的 jqueryui 模式(而不是 Bootstrap )？我不太擅长 javascript，并且非常乐意提供任何具有这两种选项的工作示例。谢谢
编辑:
我添加了 jqueryui 引用并设法通过添加此行使模式可拖动:
$(".modal-dialog").draggable();
问题是我不确定何时添加这一行。目前我已将其添加到取消方法中(只是为了使其工作):
$scope.cancel = 函数 () { $(".modal-dialog").draggable(); };
因此，当模式打开时，我需要调用取消，然后模式才可以拖动。如果我早些时候调用它，.modal-dialog 就不存在。建议？
更新了插件: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
我缺少一些东西，有人可以提供工作示例吗？
最佳答案
我创建了一个 native 指令来使模式可拖动。您只需要 AngularJs 和 jQuery。该指令使用 Ui-Bootstrap 模式中的“modal-dialog”类，您只能在标题中移动模式。
.directive('modalDialog', function(){
return {
restrict: 'AC',
link: function($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
header.on('mousedown', (mouseDownEvent) => {
var modalDialog = element;
var offset = header.offset();
modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
$("." + draggableStr, modalDialog.parents()).offset({
top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
});
}).on('mouseup', () => {
modalDialog.removeClass(draggableStr);
});
});
}
}
});
关于angularjs - AngularUI 模态可拖动且可调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22201539/
25
4
0
我来自 Asp.Net 世界，试图理解 Angular State 的含义。 什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？ 我听到很多人
我一直在寻找 3 态拨动开关，但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀！