Получение множественных угловых модалов для работы с данными ответа HTTP

Question

Я создаю приложение для authenticate with Moodle и получаю данные Json из веб-службы Moodle и используя AngularJs для отображения данных в приложении. На веб-сервисе Moodle существует несколько функций, поэтому мне нужно multiple controllers in the Angular app.

Я использую Visual Studio и Cordova для написания приложения.

С большой помощью от коллеги и StackOverflow у меня теперь есть несколько угловых модалов, работающих в моем мобильном приложении на одной странице. (Существует еще один вопрос StackOverflow о нескольких модалях, но он не говорит вам, как работать с данными ответа HTTP. Для этого вам нужно использовать Угловой бутстрап.

(Это один из тех, «задайте свой вопрос и ответить на это сами»посты -.. но дальнейшие предложения приветствуются)

Answer 1

Шаг 1 Поместите необходимые теги скрипта в ваш HTML

<script src="scripts/angular.min.js"></script> 
<script src="scripts/ui-bootstrap.js"></script> 
<script src="scripts/ui-bootstrap-tpls.min.js"></script> 

angular.min.js является главным Угловая библиотека; ui-bootstrap.js - библиотека бутстрапов с угловым пользовательским интерфейсом; ui-bootstrap-tpls.min.js - это шаблон с угловым шаблоном для правильного отображения модального шаблона.

Шаг 2. Поместите модальный шаблон в вашем HTML, внутри нг-приложение DIV

<div role="main" id="main" class="ui-content scroll" ng-app="myApp"> 
    <!--MODAL WINDOW for item details --> 
     <script type="text/ng-template" id="itemModalContent.html"> 
      <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"> 
            <i class="fa fa-close"></i> 
          </button> 
          <span class="item-name">{{item.name}}</span> 
         </div> 
         <div class="modal-body"> 
           <p>{{item.description}}</p> 
         </div> 
         <div class="modal-footer"> 
           <button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button> 
           <button type="button" class="button ok btn-primary" ng-click="ok()">Sign me up</button> 
         </div> 
        </div> 
      </div> 
    </script> 
</div> 

Шаг 3. В вашем myApp.js добавьте модальный контроллер экземпляра

myApp.controller('myItemsModalInstanceCtrl', function ($scope, $uibModalInstance, item) { 
    $scope.item = item; 
    $scope.cancel = function() { 
     $uibModalInstance.close(); 
     $('.overlay').hide(); 
    }; 
}); 

Шаг 4. Вызовите контроллер модального экземпляра из контроллера элемента

myApp.controller('myItemsCtrl', function ($scope, $http, $uibModal) { 
    url = concatUrl + 'local_servicename_ws_function_name'; 

    $http.get(url).then(function (response) { 
     $scope.items = response.data; 
     $scope.open = function (item) { 
      $('.overlay').show(); 
      var modalInstance = $uibModal.open({ 
       controller: "myItemsModalInstanceCtrl", 
       templateUrl: 'myItemModalContent.html', 
       resolve: { 
        item: function() { 
         return item; 
        } 
       } 
      }); 
     }; 
    }) 
}); 

Шаг 5. Добавьте кнопку для запуска модального

Это идет внутри ng-repeat блока

<a data-toggle="modal" ng-click="open(item)">{{item.name}}</a> 

Дополнительные примечания

Поместите модальный шаблон скрипт внутриng-app div, но за пределамиng-repeat блок.

Это работает с несколькими модальными вызовами внутри блока ng-repeat, а также с несколькими блоками и модальными шаблонами ng-repeat на странице. Вам нужно убедиться, что блок ng-repeat повторяет item in items и что ссылки на модальные шаблоны item.

Answer 2

$uibModal.open может принимать resolve параметры, и вы можете передать параметр как pageData, разрешая его данные, полученные от сервера Eg

$uibModal.open({ 
    templateUrl: .., 
    controller: 'modalCtrl', 
    resolve: { 
    pageData: function() { 
     return $http.get(..).then(function (response) { 
     return response.data; 
     }); 
    } 
    } 
}); 
.. 
// then inject it in your modal controller 
myapp.controller('modalCtrl', ['$scope', 'pageData', function ($scope, pageData) { 
    $scope.pageData = pageData; 
}])