Question

我使用angular中的工厂方法调用后端API。工厂方法直接返回$http。在我的控制器中，我正在调用工厂方法并获取数据。工厂很快就收到了承诺。然后写了一个成功的方法。在里面我有$ctrl.currentImageDesc = data.description。我正在从API正确获取data.URL值，它也会更新到currentImageDesc变量，但它没有反映在视图中。我在视图中以{{$ctrl.currentImageDesc}}

的形式访问它

在17-05-2018添加额外信息：实际上有儿童成分＆＃39; antibodiesGalleryTabs＆＃39;在主要组件＆＃39; imageGallery＆＃39;内。今天发现的是，当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>

Angularjs：当变量改变成功方法时，视图不会更新承诺

0 个答案: