如何使用角度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模式將數據傳遞給控制器？