Question

单击按钮我调用viewJob函数并传递jobId，我试图在bootstrap模式中显示响应数据。但是我无法做到，值被分配为局部变量。

即使我在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>

Answer 1

我认为您不能使用{{viewJob(model.citynew)}}因为viewJob将jobId作为参数。

通常建议在打开模态时将promises作为转换的一部分解析，方法是将它们传递给resolve块。

E.g。在页面控制器中调用模态

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

希望有所帮助：）

无法在弹出窗口中显示响应（模态）

1 个答案: