获取多个Angular模态以使用http响应数据 [英] Getting multiple Angular modals to work with http response data

问题描述

我正在构建一个应用程序来通过Moodle进行身份验证并获取来自Moodle Web服务的Json数据，并使用AngularJs在应用程序中显示数据. Moodle Web服务上有多个功能，因此我需要 Angular应用中有多个控制器.

I am building an application to authenticate with Moodle 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 multiple controllers in the Angular app.

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

I am using Visual Studio and Cordova to write the app.

在同事和StackOverflow的大力帮助下，我现在在单页移动应用程序中可以使用多个Angular模态. (还有一个关于多个模式的StackOverflow问题，但它并没有告诉您如何使用http响应数据.为此，您需要使用Angular引导程序.

With a lot of help from a colleague and StackOverflow, I now have multiple Angular modals working in my single page mobile application. (There's another StackOverflow question about multiple modals, but it doesn't tell you how to work with http response data. To do this, you need to use Angular bootstrap.

(这是问自己的问题并自己回答"的帖子之一-但欢迎提出进一步的建议.)

(This is one of those "ask your question and answer it yourself" posts - but further suggestions are welcome.)

推荐答案

步骤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引导程序库； ui-bootstrap-tpls.min.js是用于使模式模板正确显示的Angular模板脚本.

angular.min.js is the main Angular library; ui-bootstrap.js is the Angular UI bootstrap library; ui-bootstrap-tpls.min.js is the Angular templating script to make the modal template display properly.

第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();
    };
});

第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，但将 outside 放入ng-repeat块.

Put the modal template script inside the ng-app div, but outside the ng-repeat block.

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

This works with multiple modal calls inside a ng-repeat block, AND with multiple ng-repeat blocks and modal templates in a page. You do need to make sure that the ng-repeat block repeats item in items, and that the modal template references item.

这篇关于获取多个Angular模态以使用http响应数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！