如何使用角度ui模式将数据传递给控制器？

当用户选择图像文件时，我尝试打开模式窗口来裁剪图像，但我不能将它传递给模态窗口控制器，反之亦然。这是我的代码：如何使用角度ui模式将数据传递给控制器？

<!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>

Here为演示。

来源

2016-07-27 Mike

打开模式时，只需将$ 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; 
     } 
     } 
    });

或者如果你想让你的模态更独立。你需要像在items那样传递resolve中的图片值。

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(); 
      }); 
     };

UPDATE：

$scope.myCroppedImage = null; // looks like u need to init it first 
    $scope.ok = function() { 
    $uibModalInstance.close({selectedItem:$scope.selected.item,myCroppedImage:$scope.myCroppedImage}); 
    };

来源

2016-07-27 14:21:23 MMhunter

是的，它是工作，但现在只有一个问题 - 如果妳使用的是第二种方式，我不能传递对象$ scope.myCroppedImage – Mike

，U可以通过它在'result'承诺中与ur'items'一起回来。 – MMhunter

你能告诉我一个例子吗？我尝试将其添加到结果中，但没有任何更改 – Mike

如何使用角度ui模式将数据传递给控制器​​？

回答

相关问题

如何使用角度ui模式将数据传递给控制器？