代码之家 › 专栏 › 技术社区 › Nicoleta Wilskon

无法在弹出窗口中显示响应(模式)

angularjs

Nicoleta Wilskon · 技术社区 · 6 年前

单击一个按钮,我调用viewjob函数并传递jobid,这是我试图在引导模式中显示的响应数据。但我做不到,这些值被指定为局部变量。

甚至我在HTML中也尝试过

{{viewJob(model.citynew)}}

如果仍然希望将其作为$scope函数,请尝试以下代码:

控制器:

$scope.model = {}
$scope.viewJob = function (jobId) {

    UserService.employerJob(jobId).then(function(response) {
        if(response.json.response.statuscode == 0) {  
            $scope.data = response.json.response.data;

            $scope.keyskills = $scope.data.keySkill;

            $scope.model.citynew  = $scope.data.location.city;

            $scope.model.numberofpositionsnew  = $scope.data.numberOfPositions;

            $scope.model.experiencelevelnew  = $scope.data.experienceLevel;

            $scope.model.link  = $scope.data.link;

            $('#viewJobModal1').modal('show');
        }
    });
};

HTML

<div class="modal fade" id="viewJobModal1" role="dialog"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content" id="style-4" style="height:400px;line-height: 1.8;overflow-y: auto;">
            <div class="modal-header" style="background-color:#3e79b6;height:50px;">
                <div class="col-sm-4" style="font-size:20px;text-align:center;color:white; width: 94.333333% !important;">View Details of Job</div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="color:black;">&times;</span>
                </button>
            </div>

            <div class="modal-body" style="height: 400px;line-height: 1.8;">
                <div class="col-lg-12">
                    <div class="col-lg-12" align="center" style="text-align:justify;">
                        <div class="col-lg-5"><b>Company Name  :</b></div> 
                        <div class="col-lg-7" style="text-align:justify;">{{(model.companynew)}}</div>
                    </div>   
                    <div class="col-lg-12" align="center" style="text-align:justify;">
                        <div class="col-lg-5"><b>Job title  :</b></div>
                        <div class="col-lg-7" style="text-align:justify;">{{model.jobtitlenew}}</div> 
                    </div>
                    <div class="col-lg-12" align="center" style="text-align:justify;">
                        <div class="col-lg-5"><b>Job Description   :</b></div>
                        <div class="col-lg-7" style="text-align:justify;">{{model.jobdescriptionnew}}</div> 
                    </div>
                </div>       
            </div>
        </div>
    </div>
</div>

1 回复 | 直到 6 年前

Protozoid 6 年前

我觉得你不能用 {{viewJob(model.citynew)}} 因为 viewJob 将jobid作为参数。

通常建议在打开模式时通过在resolve s块中传递承诺来解决作为过渡的一部分的承诺。

例如,调用页面控制器中的模式

$modal.open({
    templateUrl: 'path/to/modal/template.html',
    controller: 'ModalCtrl',
    controllerAs: 'modalCtrl',
    resolve: {
        job: function () {
            return UserService.employerJob(jobId);
        }
    }
});

然后,在modalctrl中,您可以将作业作为依赖项来获取,显示模板中所需的数据。

angular.module('AppModule').controller('ModalCtrl', ['job', function (job) {
    modalCtrl = this;

    modalCtrl.keyskills = job.keySkill;
    modalCtrl.citynew = job.location.city;
    modalCtrl.numberofpositionsnew = job.numberOfPositions;
    modalCtrl.experiencelevelnew = job.experienceLevel;
    modalCtrl.companynew = job.company;
    modalCtrl.jobtitlenew = job.jobTitle;
    modalCtrl.jobdescriptionnew = job.jobDescription;
    modalCtrl.link = job.link;
}]);

然后在模式模板中显示这些

<div class="modal fade" id="viewJobModal1" role="dialog"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content" id="style-4" style="height:400px;line-height: 1.8;overflow-y: auto;">
            <div class="modal-header" style="background-color:#3e79b6;height:50px;">
                <div class="col-sm-4" style="font-size:20px;text-align:center;color:white; width: 94.333333% !important;">View Details of Job</div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="color:black;">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="height: 400px;line-height: 1.8;">
                <div class="col-lg-12">
                    <div class="col-lg-12" align="center" style="text-align:justify;">
                        <div class="col-lg-5"><b>Company Name  :</b></div> 
                        <div class="col-lg-7" style="text-align:justify;">{{(modalCtrl.companynew)}}</div>
                    </div>   

                    <div class="col-lg-12" align="center" style="text-align:justify;">
                        <div class="col-lg-5"><b>Job title  :</b></div>
                        <div class="col-lg-7" style="text-align:justify;">{{modalCtrl.jobtitlenew}}</div> 
                    </div>

                    <div class="col-lg-12" align="center" style="text-align:justify;">
                        <div class="col-lg-5"><b>Job Description   :</b></div>
                        <div class="col-lg-7" style="text-align:justify;">{{modalCtrl.jobdescriptionnew}} </div> 
                    </div>
                </div>       
           </div>
        </div>
    </div>
</div>

希望有帮助:)