关于javascript：获取多个Angular模式以使用http响应数据

Getting multiple Angular modals to work with http response data

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

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

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

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

$uibModal.open可以接受resolve参数，并且您可以传递像pageData这样的参数，并使用从服务器接收的数据来解析它。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

步骤1.将所需的脚本标记放入HTML

1
2
3

angular.min.js是主要的Angular库； ui-bootstrap.js是Angular UI引导程序库； ui-bootstrap-tpls.min.js是用于使模式模板正确显示的Angular模板脚本。

第2步。将模式模板放入HTML中的ng-app div

中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/ng-template" id="itemModalContent.html">

<button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">
<i class="fa fa-close">
</button>
<span class="item-name">{{item.name}}</span>

<p>{{item.description}}</p>

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

步骤3。在myApp.js中，添加模式实例控制器

1
2
3
4
5
6
7

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

第4步。从项目controller

调用模式实例控制器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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块内

1	{{item.name}}

附加说明

将模态模板脚本放在ng-app div内，但在ng-repeat块外。

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