javascript - 如何使用angularjs动态调整窗口大小

Question

好吧，我一直在四处寻找如何使用光标调整窗口大小，但没有成功。

我的想法是调整 html 页面内的窗口大小并能够四处移动。我猜它需要一些 css 经验才能这样做。

有人可以帮助我吗？ 谢谢!

Answer 1

对于描述，我猜你正在尝试调整 div 或其他东西的大小，以便你可以使用转换:

https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/

尝试使用它进行拖放:

http://ngmodules.org/modules/ngDraggable ( Example )

要使用 draggable，请使用如下指令:

1) 将库包含在您的索引中:

<script src="ngDraggable.js"></script>

2) 在你的模块定义中注入(inject) ngDraggable:

angular.module('myApp', ['... , ngDraggable']);

3) 用 ng-drag 添加你的 html 标签

<div ng-drag="true" ng-drag-data="{obj}" ng-center-anchor="true"
    ng-drag-success="onDragComplete($data,$event)">
  Draggable div
</div>

ng-drag-success 是拖动完成后的函数。

因此，您可以根据 html 中的 div 创建一些框，并在可拖动元素的 Angular 处附加一些“调整大小点”，然后在成功回调 (onDragComplete) 中修改样式你的“窗口”来改变它的大小。

要完成调整大小，您可以使用 ng-style 并更改“窗口”的宽度和高度。

HTML:

<!-- Your resizable window -->
<div ng-style="changingStyle">

Controller :

$scope.changingStyle = {}
$scope.onDragComplete = function(data, event){
   ...
   // Here you pass some params to change the size as you want
   changeWinSize(someOperationToResize);
   ...
}

var changeWinSize = function (params){
     $scope.changingStyle = {height: params.height, width: params.width }
}

请提供有关您的问题的更多信息。