Как передать данные в контроллер с помощью углового интерфейса?

Question

Как передать данные в контроллер с помощью углового интерфейса?

0

Когда пользователь выбирает файл изображения, я пытаюсь открыть модальное окно для обрезки изображения, но я не могу передать его модальному оконному контроллеру и наоборот. Это мой код:

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

Вот демо.

Mike 27 июль 2016, в 15:50

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

MMhunter · Accepted Answer · 2016-07-27T12-50-00.000Z

Просто передать $ простор для 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 modal более независимым. u нужно передать значение изображения в 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 controller
      }
    });

Но таким образом u должен вызывать '$ 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});
  };

Да, это работа, но есть только одна проблема - я не могу передать объект $ scope.myCroppedImage
Если вы используете второй способ, вы можете передать его обратно вместе с вашими items в обещании result .
Можете ли вы показать мне пример? Я пытаюсь добавить его в результат, но ничего не изменилось
Проверьте обновленный. Похоже , директива ng-img-crop не будет работать , когда переплетены значение Прицел undefined в самом начале.
Он прошел myCroppedImage, но я не могу изменить его с помощью img-crop во всплывающем окне. Так что теперь myCroppedImage генерирует автоматически и не изменяется
Только что проверил это работает хорошо, спасибо