当用户选择图像文件时，我尝试打开模式窗口以裁剪图像，但是无法将其传递给模式窗口控制器，反之亦然。这是我的代码：
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<script src="example.js"></script>
<link href="ng-img-crop.css" rel="stylesheet" type="text/css">
<script src="ng-img-crop.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<input id="coolButton" name="avatar" type="file" accept="image/*" class="form-control" placeholder="">
<div class="hidden">
<div id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<div class="cropArea">
<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:300px;
height:350px;
}
</style>
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}"/></div>
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<!--button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button-->
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
这是演示。
scope打开模态时，只需将$ scope传递给该字段即可。这将使模式使用$ scope作为其父范围。如果未设置范围，则默认情况下它将使用$ rootScope作为其父级。
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
//templateUrl: 'myModalContent.html',
template: template,
controller: 'ModalInstanceCtrl',
size: size,
scope:$scope, // set the scope
resolve: {
items: function () {
return $scope.items;
}
}
});
或者，如果您确实想使您的模态更独立。您需要像传递图像resolve那样传递图像的值items。
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
//templateUrl: 'myModalContent.html',
template: template,
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
},
myImage:function(){
return $scope.myImage
} // send the image data to the modal's controller
}
});
但是以这种方式，您必须在读取图像后调用“ $ scope.open”。
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
$scope.open();
});
};
更新：
$scope.myCroppedImage = null; // looks like u need to init it first
$scope.ok = function () {
$uibModalInstance.close({selectedItem:$scope.selected.item,myCroppedImage:$scope.myCroppedImage});
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句