角度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を親スコープとして使用します。スコープが設定されていない場合は、デフォルトで$ 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; 
     } 
     } 
    });

もしあなたがurモーダルをもっと独立して作りたいのであれば。 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 
     } 
    });

しかし、画像がreadedた後、このようにuが '$ 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

はい、それは仕事ですが、一つだけ問題が今そこにある - uは第二の方法を使用している場合、私はオブジェクト$ scope.myCroppedImage – Mike

を渡すことはできません、uは渡すことができます'result'約束の中にur' items'と一緒に戻ってきます。 – MMhunter

私に例を教えてもらえますか？結果に追加しようとしましたが、何も変わりません。 – Mike

角度uiモーダルを使用してコントローラにデータを渡す方法は？

答えて

関連する問題