我正在构建一个使用Moodle进行身份验证并从Moodle Web服务获取Json数据的应用程序,并使用AngularJs在应用程序中显示数据。Moodle Web服务上有多个功能,因此我在Angular应用程序中需要多个控制器。
我正在使用Visual Studio和Cordova编写应用程序。
在同事和StackOverflow的大量帮助下,我现在在单页移动应用程序中可以使用多个Angular模态。(还有一个关于多个模式的StackOverflow问题,但是它并没有告诉您如何使用http响应数据。为此,您需要使用Angular引导程序。
(这是“问自己的问题并自己回答”的帖子之一-但欢迎提出进一步的建议。)
步骤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步。将模式模板放在ng-app div中的HTML中
<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
股利,但外面的ng-repeat
块。
这适用于一个ng-repeat
块内的多个模态调用,ng-repeat
以及页面中的多个块和模态模板。您需要确保ng-repeat
重复执行该块item in items
,并确保模态模板引用item
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句