Περίεργο πρόβλημα με $scope σε AngularJS

[lion2486]

Καλησπέρα σε όλους, φτιάχνω κάτι σε AngularJS (είναι η πρώτη μου επαφή με το framework) και μου έχει παρουσιαστεί ένα πρόβλημα που με έχει προβληματίσει..

 

Έχω την init() μέθοδο σε έναν controller.

 $scope.init = function(){
                AuctionsService.GetById($routeParams.id)
                    .then(function(res){
                        if(res.status == "success"){
                            $scope.auction = res.payload;
                        }else{
                            FlashService.Error(res.message);
                        }
                    });

                AuctionsService.GetImagesById($routeParams.id)
                    .then(function(res){
                        if(res.status == "success"){
                            $scope.files = res.payload;
                        }else{
                            FlashService.Error(res.message);
                        }
                    });

            };

Και στο Template έχω το παρακάτω.. (συνοπτικό)

<div ng-controller="editAuctionCtrl" ng-init="init()">

<!--  More code here -->

 <div class="list-group">
                <div class="list-group-item image-preview" ng-repeat="file in files">
                    <img ng-src="{{file.url}}" alt="Image" />
                    <button type="button" class="btn btn-default btn-sm pull-right" ng-click="remove(file.url);">
                        <span class="glyphicon glyphicon-remove-circle"></span> Remove
                    </button>
                </div>
            </div>
</div>

Η λειτουργία γενικά είναι ότι κατα την εκκίνηση του Controller φορτώνω ένα object και μετά φορτώνω και μια λίστα από εικόνες. Τα στοιχεία του αντικειμένου ($scope.auction) μπορώ κανονικά μέσω ng-model να τα χρησιμοποιώ αλλά όταν κάνω το ng-repeat="file in files" εκεί δεν μου λειτουργεί καθόλου αυτό το κομμάτι.

Δοκίμασα να χρησιμοποιήσω αντί για $scope.files -> $rootScope.files και εκεί λειτουργούσε κανονικά, αλλά μετά θα έπρεπε να αδειάζω την μεταβλητή χειροκίνητα όποτε δεν την χρειάζομαι και δεν μου φαίνεται πολύ "καθαρό".

 

Υπάρχει κάποια πρόταση/βοήθεια για το πρόβλημά μου; Έχω κάτι που δεν το χρησιμοποιώ με σωστό τρόπο;

 

Ευχαριστώ.

[alou]

Δοκίμασε να κάνεις initialize τη μεταβλητή σου στον controller έξω από το fn,

$scope.files = {};

$scope.init =  ....
//κάπου κάνεις assigne $scope.files = whatever

Για να δοκιμάζεις τι σου έρχεται, κάνε και ένα 

{{files | json }}

στο template κάπου.

[lion2486]

Δοκίμασε να κάνεις initialize τη μεταβλητή σου στον controller έξω από το fn,

$scope.files = {};

$scope.init =  ....
//κάπου κάνεις assigne $scope.files = whatever

Για να δοκιμάζεις τι σου έρχεται, κάνε και ένα 

{{files | json }}

στο template κάπου.

Το δοκίμασα, αν και εμφανίζει το αρχικό initialized object {} και μετά, ενώ κάνει το .get request δεν αλλάζει κάτι... Σαν να μην μπορεί να γράψει μετά το ajax call στο ίδιο scope... (ενώ στο ακριβώς απο πάνω κομμάτι δουλεύει κανονικά..)

[alou]

Κάνε log στο success του promise να δεις τι γίνεται, προφανέστατα κάτι επιστρέφεται λάθος.

[lion2486]

έβαλα στο success console.log (το είχα ξαναδοκιμάσει) και έχω κανονικά την απάντηση από το $http.get

{"payload":[{"url":"api\/files?auctionId=1&fileName=9kdktdhqsta38igv20vsjt6qbj.jpg"},{"url":"api\/files?auctionId=1&fileName=ncgb4spk99ssnhueeannvv0fak.jpg"},{"url":"api\/files?auctionId=1&fileName=nvgh9bv9o1pk2lrd9gf46mfd1h.jpg"}],"message":"File listing for auction done","status":"success"}

(αυτό είναι από το δίκτυο αλλά το ίδιο object εμφανίζει.. )

[alou]

Ναι αλλά έχεις ένα conditional που ψάχνει για res.status πρίν το κάνει assign στο items και στο object σου δεν υπάρχει τίποτα τέτοιο... (ούτε success ούτε fail).

 

Αν δε φταίει ούτε αυτό, μόνο αν τα βάλεις σε ένα ~codepen μπορούμε να δούμε κάτι παραπάνω χωρίς υποθέσεις.

[lion2486]

Ναι αλλά έχεις ένα conditional που ψάχνει για res.status πρίν το κάνει assign στο items και στο object σου δεν υπάρχει τίποτα τέτοιο... (ούτε success ούτε fail).

 

Αν δε φταίει ούτε αυτό, μόνο αν τα βάλεις σε ένα ~codepen μπορούμε να δούμε κάτι παραπάνω χωρίς υποθέσεις.

Υπάρχει το status στο τέλος, άλλωστε το console.log μέσα στο if(status=="success") το έκανα..

Δεν είναι πολύ έυκολο να το βάλω σε codepen γιατί έχει και API κτλ, ίσως δώσω το public url της εφαρμογής..

 

Προς το παρόν χρησιμοποίησα το $rootScope και απλά πριν το χρισημοποιήσω το αδειάζω για να μην έχει "σκουπίδια"..

 

Ευχαριστώ πολύ για το ενδιαφέρον όπως και να έχει..!

[t(o.ot)]

Εδώ πάντως ο κώδικάς σου δουλεύει κανονικά. Είσαι σίγουρος πως δεν έχεις κάποια περίπτωση scope inheritence (fiddle) ή δεν είσαι μέσα σε κάποιο isolate scope;

 

hint: το $rootScope reference δεν δείχνει πάντα στο ίδιο scope

[lion2486]

Εδώ πάντως ο κώδικάς σου δουλεύει κανονικά. Είσαι σίγουρος πως δεν έχεις κάποια περίπτωση scope inheritence (fiddle) ή δεν είσαι μέσα σε κάποιο isolate scope;

 

hint: το $rootScope reference δεν δείχνει πάντα στο ίδιο scope

Ευχαριστώ πολύ για την απάντησή σου. Λογικά κάποιο directive isolation έφταιγε. Ακολούθησα αυτόν https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md τονοδηγό και χρησιμοποιώ ControllerAs: 'vm' και έχω ορατότητα όπως την θέλω.