невозможно отобразить ответ во всплывающем окне (модально)

Question

при нажатии кнопки я вызываю функцию 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>

Answer 1

Я не думаю, что вы можете использовать {{viewJob(model.citynew)}}, потому что viewJob принимает в качестве параметра jobId.

Обычно рекомендуется разрешать обещания как часть перехода при открытии модального, передавая их вблок resolves.

Например, вызов модального режима в контроллере вашей страницы

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

Надеюсь, это поможет:)