0

I am calling a backend API using a factory method in angular. The factory method returns $http directly. In my controller, I am calling the factory method and fetching the data. The factory returned a promise, soon it attached. then and written a success method. Inside it I have $ctrl.currentImageDesc = data.description. I am getting the data.URL value correctly from API, it is getting updated to the currentImageDesc variable also but it's not reflecting in view. I am accessing it in view as {{$ctrl.currentImageDesc}}

Extra Info added on 17-05-2018: Actually there is child component 'antibodyGalleryTabs' inside the main component 'imageGallery'. What is found today is, when this child component is not accessed in the HTML, then the main component data is properly reflecting view. When I add the tag in html, the child component is working fine but the main component data is not reflected in view.

I have updated the code to show the details about child component.

Factory Service

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
                })
            }
        };
}

Component Code

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: {
    }
});

Component controller code

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 template

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

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

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

</div>

Accessing the component

<image-gallery></image-gallery>
Hari Prashanth
  • 35
  • 4
  • Check out #7 [here](https://stackoverflow.com/a/500459/242584). – Justin Ryan May 16 '18 at 02:40
  • How you are accessing controller in image-gallery.template.html. Are you using ng-controller? If not using ng-controller try giving ng-controller="imageGalleryController as ctrl" and give
    {{ctrl.currentImageDesc}}
     – Ravi Kiran Ayinampudi May 16 '18 at 03:39
  • Possible duplicate of [using ControllerAs in an angular 1.5 component](https://stackoverflow.com/questions/47000862/using-controlleras-in-an-angular-1-5-component) – coudy.one May 16 '18 at 07:36
  • @coudy.one With components, the `controllerAs` property is not needed if the component template uses the default of `$ctrl`. For more information, see [AngularJS Developer Guide - Comparison between Directive definition and Component definition](https://docs.angularjs.org/guide/component#comparison-between-directive-definition-and-component-definition). – georgeawg May 16 '18 at 22:26
  • Show us how you instantiate the component. – georgeawg May 16 '18 at 22:31
  • its not about controllerAs. Adding it is not changing anything. – Hari Prashanth May 24 '18 at 17:19

0 Answers0