获取多个 Angular 模式来处理 http 响应数据

Question

我正在为 and get Json data from a Moodle web service, and using AngularJs to display the data in the app. There are multiple functions on the Moodle webservice, so I need 构建应用程序。

我正在使用 Visual Studio 和 Cordova 编写应用程序。

在同事和 Whosebug 的大力帮助下，我现在有多个 Angular 模式可以在我的单页移动应用程序中工作。（还有另一个关于多模式的 Whosebug 问题，但它没有告诉你如何使用 http 响应数据。要做到这一点，你需要使用 Angular bootstrap.

（这是 "ask your question and answer it yourself" 的帖子之一 - 但欢迎提出更多建议。）

Answer 1

$uibModal.open 可以接受 resolve 参数，你可以像 pageData 一样传递参数，用从服务器接收到的数据解析它。例如

$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;
}])

Answer 2

步骤 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 是主要的 Angular 库； ui-bootstrap.js 是 Angular UI bootstrap 库； ui-bootstrap-tpls.min.js 是 Angular 模板脚本，可以使模态模板正确显示。

第 2 步。将模态模板放入您的 HTML，在您的 ng-app 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();
    };
});

第四步.从item控制器中调用模态实例控制器

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-appdiv里面，但是放在ng-repeat外面 ]块。

这适用于 ng-repeat 块内的多个模态调用，以及页面中的多个 ng-repeat 块和模态模板。您确实需要确保 ng-repeat 块重复 item in items，并且模态模板引用 item.

获取多个 Angular 模式来处理 http 响应数据

Getting multiple Angular modals to work with http response data

javascript

moodle

modal-dialog

angularjs