Angularjs: представление не обновляется при изменении переменной в методе обещания успеха - PullRequest
Новая
       27

Angularjs: представление не обновляется при изменении переменной в методе обещания успеха

0 голосов
/ 16 мая 2018

Я вызываю бэкэнд-API, используя фабричный метод в angular.Заводской метод возвращает $http напрямую.В моем контроллере я вызываю фабричный метод и извлекаю данные.Фабрика вернула обещание, вскоре его прикрепили.тогда и написали метод успеха.Внутри у меня есть $ctrl.currentImageDesc = data.description.Я правильно получаю значение data.URL из API, оно также обновляется до переменной currentImageDesc, но не отображается в поле зрения.Я обращаюсь к нему в виде {{$ctrl.currentImageDesc}}

Дополнительная информация добавлена ​​17-05-2018: На самом деле внутри основного компонента 'imageGallery' есть дочерний компонент 'carbonGalleryTabs'.Сегодня обнаруживается, что когда к этому дочернему компоненту нет доступа в HTML, данные основного компонента должным образом отражают представление.Когда я добавляю тег в html, дочерний компонент работает нормально, но данные основного компонента не отображаются в представлении.

Я обновил код, чтобы показать подробности о дочернем компоненте.

Заводское обслуживание 

angular.module('sharedModule').factory('GalleryDataService', galleryFactory)
galleryFactory.inject = ['$http', '$q']
function galleryFactory($http, $q) {
    var serviceUrl = $m.basepath + 'antibody-figures?assayId=';
       console.log('urllll',serviceUrl);
        return {
            fetchData : function(productid) {
                return $http({
                    method: 'GET',
                    url: serviceUrl + productid
                })
            }
        };
}

Код компонента 

angular.module('sharedModule').component('antibodyGalleryTabs', {
    template: 'TTTTTT<div class="tabs-container"><div class="nav-wrapper"><ul class="nav nav-pills"><li class="tab" ng-repeat="application in $ctrl.navPillsData" ng-class="{ \'tab--active\' : $ctrl.selectednav == application.abbreviation }"><a>{{ application.abbreviation }}</a></li></ul></div></div>',
    bindings:{
        navPillsData:'<',
        selectedNav:'@'
    },
    controller:antibodyGalleryTabsController
});
function antibodyGalleryTabsController(){
    $ctrl = this;
}

angular.module('sharedModule').component('imageGallery', {
    templateUrl: 'assets/shared-module/app/components/image-gallery/image-gallery.template.html',
    controller: imageGalleryController,
    bindings: {
    }
});

Код контроллера компонента 

imageGalleryController.$inject = ['$q','$scope', '$attrs', '$element','GalleryDataService'];

function imageGalleryController($q,$scope, $attrs, $element, GalleryDataService) {
    $ctrl = this;
    $ctrl.selectednav = 'nav2';
    $ctrl.totalImages = 7; //this is getting updated and aslo reflected in view

    $q.when(GalleryDataService.fetchData('A11126'))
    .then(function (data){  
        $ctrl.navPillsData = [{abbreviation:'nav1'},{abbreviation:'nav2'}];//this array is generated from the 'data'. This is reflected in view correctly   
        var img = data.data[0].links[5];
        img.index = 5;
        $ctrl.totalImages = 27;
        updateCurrentImageDetails(img);
    });

    function updateCurrentImageDetails(currentImage){
    //these variables are getting updated but not reflected in view
        $ctrl.currentImageNum = currentImage.index;
        $ctrl.currentImageUrl = currentImage.url.src;
        $ctrl.currentImageTitle = currentImage.title;
        $ctrl.currentImageDesc = currentImage.description;
    }
}

HTML-шаблон 

<div class="adv-cert-gallery drawer-gallery">

    <antibody-gallery-tabs navPillsData='$ctrl.navPillsData' selectedNav='$ctrl.selectednav'></antibody-gallery-tabs>

    <img src="{{$ctrl.currentImageUrl}}">

</div>

Доступ к компоненту 

<image-gallery></image-gallery>
...