如何将json响应显示回网页？答案

【问题标题】：How to show json response back to webpage?如何将json响应显示回网页？
【发布时间】：2015-12-14 23:47:03
【问题描述】：

我遇到过一种情况，当我单击按钮时，会调用控制器方法。 $http.get 会给我一个 URL 作为响应。当我点击该网址时，我得到引导模式（所有模式 html）作为响应。我想将模态响应显示到我拥有的引导模态中。

我该怎么做？

按钮：

<button type="button" class="btn btn-primary" data-target="#pwdConfirm" ng-click="doMethod('ResetPassword',@Model.Id)"><span class="col-sm-12 fa fa-refresh"> Reset Password</span></button>

控制器代码：

$scope.doMethod = function (method, Id) {
    var userId = Id;
    var url =  "http://" + $window.location.host+ "/User/" +method+"?id=" + userId;
    //var url = $window.location.host + "/User/" + method + "?id=" + userId;
    $http({
        method: 'GET',
        url: url            
    }).success(function (response) {            
        $scope.successresponse = response;
        console.log(response);

    }).error(function (response) {
        alert(response);
    });

来自 console.log 语句的控制器响应：

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Password Reset</h4>
    </div>
    <div class="modal-body">
        <div class="col-md-12">
            <img src="/Content/images/greenCheck.png" title="logo" class="imgLogo" />
        </div>
        <div class="col-md-12">
            <p>Password Reset to Default</p> 
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-4"></div>
        <div class="col-md-8">
            Password :  bforce
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-md-6 row">
            <a class="page-header fa fa-edit  btn btn-warning" href="/User/Index" style="color:white">Activate later</a>
        </div>
    </div>
</div>

现在我希望此响应在另一个页面中显示为 boostrap 模式。我怎样才能做到这一点？

【问题讨论】：

向我们展示一些代码，请求的内容是什么？你尝试了什么？
docs.angularjs.org/api/ng/service/$http 。基本上，您调用 $http，并定义一个回调函数......在回调中，您可以制作类似 $scope.data = response.data
我回复了你可以看到的详细代码

标签： javascript html json angularjs twitter-bootstrap

【解决方案1】：

$scope.doMethod = function (method, Id) {
    var userId = Id;
    var url =  "http://" + $window.location.host+ "/User/" +method+"?id=" +    userId;
    //var url = $window.location.host + "/User/" + method + "?id=" + userId;
 $http({
    method: 'GET',
    url: url            
 }).success(function (response) {            
    $scope.successresponse = response;
    console.log(response);
    var showBadRoleModelInstance = $modal.open({
        template: "<div ng-bind-html='htmlContent'></div>",
        backdrop: true,
        windowClass: 'modal',
        controller: modalController,
        resolve: {
            htmlContent: function () {
                return response;
            }
        }
    });
}).error(function (response) {
    alert(response);
});



function modalController(htmlContent){
    $scope.htmlContent = htmlContent;
}

【讨论】：