简体   繁体   中英

ngInit not working asynchronously(with $q promise)

Edit: Plunker is working, actual code isn't: http://plnkr.co/edit/5oVWGCVeuTwTARhZDVMl?p=preview

The service is contains typical getter\\setter stuff, beside that, it functions fine, so I didn't post it's code to avoid TLDR.

TLDR version: trying to ng-init a value fetched with AJAX into the ngModel of the text-area, the request resolves with the correct value, but the textarea remain empty.

parent controller function(talks to the service):

$scope.model.getRandomStatus = function(){
    var deffered = $q.defer();
var cid = authService.getCompanyId();

var suggestions = companyService.getStatusSuggestions(cid);
if(suggestions && suggestions.length > 0){
        deffered.resolve(suggestions[Math.floor(Math.random(suggestions.length) + 1)].message);
        return deffered.promise;//we already have a status text, great!
    }

    //no status, we'll have to load the status choices from the API
    companyService.loadStatusSuggestions(cid).then(function(data){
        companyService.setStatusSuggestions(cid, data.data);
        var result = data.data[Math.floor(Math.random(data.data.length) + 1)];
        deffered.resolve(result.message);   
    },
    function(data){
        _root.inProgress = false;
        deffered.resolve('');
        //failed to fetch suggestions, will try again the next time the compnay data is reuqired
    });
    return deffered.promise;
}

child controller:

.controller('shareCtrl', function($scope){
    $scope.layout.toggleStatusSuggestion = function(){
         $scope.model.getRandomStatus().then(function(data){
            console.log(data);//logs out the correct text
            //$scope.model.formData.shareStatus = data;//also tried this, no luck
            return data.message;
         });
    $scope.model.formData.shareStatus = $scope.layout.toggleStatusSuggestion();//Newly edited
    }
});

HTML:

<div class="shareContainer" data-ng-controller="shareCtrl">
 <textarea class="textAreaExtend" name="shareStatus" data-ng-model="model.formData.shareStatus" data-ng-init="model.formData.shareStatus = layout.toggleStatusSuggestion()" cols="4"></textarea>
</div>

I believe what you are wanting is :

$scope.model.getRandomStatus().then(function(data){            
            $scope.model.formData.shareStatus = data.message;

});

Returning something from within then does not return anything from the function wrapping it and therefore does nothing

Turns out that I had a custom validation directive that was watching the changes in the model via $formatters, and limting it to 80 chars(twitter), it was failing silently as I didn't expect to progmatically insert invalid values into my forms, very stupid, but could happen to anyone. Had to make some changes to it, so it's worth to remember in case it happens to anyone else.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM