我有一个图像,需要通过拖动角来调整大小,angularjs中有任何选项吗？
截至目前我正在做手动图像调整大小如下：
<img src="~/Content/images/login-logo.png" width="{{image.width}}" height="{{image.size}}"/> <div class="right-wrapper"> <h3 class="right-head">Appearance <img src="~/Content/images/info-icon.png"></h3> <div ng-if="isImage"> <div ng-class="form-group"> size <input class="form-control" type="textBox" ng-model="image.size" /> </div> <div ng-class="form-group"> width <input class="form-control" type="textBox" ng-model="image.width" /> </div> </div> </div>
但是我想通过拖动它来调整它的大小.
解决方法
希望这个角度指令有所帮助
(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;
}
});
})();
<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>
