Как динамически изменять окно с помощью 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)

Для использования перетаскиваемого использования используйте следующую директиву:

1) Включить библиотеку в индексе:

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

2) В вашем определении модуля впрыснуть ngDraggable:

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

3) Append ваши 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 - это ваша функция при завершении перетаскивания.

Таким образом, вы можете создать окно, основанное на div в вашем html, и добавить некоторые «точки изменения размера» в углах, которые являются перетаскиваемыми элементами, а затем на ваш обратный вызов успеха (onDragComplete) изменить стиль вашего «окна», чтобы изменить его размер.

Чтобы изменить размер, вы можете использовать ng-style и изменить ширину и высоту своего «окна».

Html:

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

Контроллер:

$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 } 
} 

Просьба представить дополнительную информацию о вашей проблеме.