让多个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
等参数,用从服务器接收的数据进行解析。例如
$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
中<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用来使模态模板正确显示的模板脚本。
步骤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>
<<p> 其他说明/strong> 将模态模板脚本放在 ng-app
div内,而放在 ng-repeat
block外。
这适用于ng-repeat
块内的多个模态调用,以及页面中的多个ng-repeat
块和模态模板。您确实需要确保ng-repeat
块重复item in items
,并且模态模板引用item
。
相关文章:
- IIS动态HTTP响应标头
- 我如何设置HTTP头“;访问控制允许起源”;用于来自thttpd web服务器的HTTP响应
- Http响应拆分安全问题的XMLHTTPRequest/Response用例的Filter实现
- 使用Express筛选HTTP响应
- 使用不同参数的超级代理缓存缓存 HTTP 响应
- 如何无限期缓存HTTP响应
- 如果HTTP响应为404,脚本标记会被阻塞吗
- Angular 2:用HTTP响应填充复选框列表
- 如何访问您没有访问的HTTP响应的标头't使用javascript通过AJAX发送
- string http响应!=javascript中的相同字符串
- 拦截$resource和$http响应angular
- HTTP响应中出现意外内容
- 如何在java脚本中从http响应生成blob
- 如何记录Apache Cordova应用程序中加载的iframe的http响应
- 如何缓存$http响应以便在angularjs中重用
- 如何将$http响应值传递给另一个函数
- 检查 http 响应代码以显示相应的失败消息
- $http响应拦截器标头
- 在封闭的 python 服务器上的 ajax 请求中获取 0 作为 Http 响应代码
- 如何正确编写 http 响应以便使用 XHR 进度事件侦听器