Question

我有一个图片，需要通过拖动它的角来调整它的大小，angularjs中有任何选项吗？

截至目前，我正在进行手动调整大小图像：

MyViewModel

但是我想通过拖动它来调整它的大小。

Answer 1

希望这个角度指令有帮助

＆＃13;

(function () {
  'use strict';

  angular.module('myApp', [])

  .directive('resizable', function () {

    return {
        restrict: 'A',
        scope: {
            callback: '&onResize'
        },
        link: function postLink(scope, elem, attrs) {
            elem.resizable({handles: "all"});
            elem.on('resize', function (evt, ui) {
              scope.$apply(function() {
                if (scope.callback) { 
                  scope.callback({$evt: evt, $ui: ui }); 
                }                
              })
            });
        }
    };
  })


  .controller('MainCtrl', function ($scope) {

    $scope.resize = function(evt,ui) {
      //console.log (evt,ui);
      $scope.w = ui.size.width;
      $scope.h = ui.size.height;
    }

  });

})();

＆＃13;

<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>

<body class="jumbotron" ng-controller="MainCtrl" ng-app="myApp">
	
  <h2>Resizable directive in AngularJS and jQueryUI</h2>
  <p>Drag the cursor to resize</p>
  
  <img src="http://dummyimage.com/600x400/fff/000" resizable on-resize="resize($evt, $ui)" width="200" height="200" />
	<div ng-show="w">{{w}}:{{h}}px</div>
</body>

＆＃13;

Answer 2

这解决了我的问题

可调整大小：

<div ngResizable > I am resizable </div>

如果愿意，可以同时使用两个指令：(可调整大小和可拖动）

<div ngDraggable ngResizable> I'm now draggable and resizable </div>

使用下面的链接，您将找到更多详细信息。

angular2-draggable

如何通过拖动调整图像大小

2 个答案: