не может получить доступ к данным из службы в контроллере

Question

Я пытаюсь добавить angular-typeahead в мое приложение для поискового запроса, беря справку из этого Plunkr.

Это код app.js файла:

var myApp = angular.module('myApp', ['ngRoute','siyfion.sfTypeahead']); 

myApp.factory('websitesSvc',function($http, $log, $q) { 
return { 
    getwebsites: function(){ 

     //Create a promise using promise library 
     var deferred = $q.defer(); 

     $http({method: 'GET', url: '/api/websites/'}). 
      success(function(data, status, headers,config){ 
       deferred.resolve(data); 
      }). 
      error(function(data, status, headers,config){ 
       deferred.reject(status); 
      }); 

     return deferred.promise; 
    } 
}; 
}); 

myApp.controller('MyCtrl', ['$scope','websitesSvc', 
function($scope,websitesSvc) { 

$scope.searchString=null; 


websitesSvc.getwebsites().then(function(websites){ 
$scope.websites = websites; 
console.log($scope.websites); //It works here 
}); 

//Output undefined 
//THIS IS NOT WORKING 

console.log($scope.websites); 



var websites = new Bloodhound({ 
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.domain_name); }, 
queryTokenizer: Bloodhound.tokenizers.whitespace, 

//want to pass the websites array list from service to local 
local:websites, //THIS IS NOT WORKING 
}); 

// initialize the bloodhound suggestion engine 
websites.initialize(); 

$scope.numbersDataset = { 
displayKey: 'domain_name', 
source: websites.ttAdapter() 
}; 

// Typeahead options object 
$scope.exampleOptions = { 
highlight: true 
}; 

} 
]); 

Дело это я не в состоянии передать значение $scope.websites в typeahead .Как сделать получить значение сайтов от услуг так что я могу передать результирующий массив на typeahead?

После редактирования кода, как предложено красный 6 часов назад Kalhano Toress Pamuditha, я могу получить доступ к data.But теперь я получаю это

Answer 1

websitesSvc.getwebsites().then(function(websites){ 
    $scope.websites = websites; 
    console.log($scope.websites); //It works here 
}); 


//Output undefined 
//THIS IS NOT WORKING 

console.log($scope.websites);     this will execute before websitesSvc.getwebsites() completes, 

Javascript код не выполняется до тех пор, пока синхронизация вызовов быть полным, он выполнит остальную часть кода, то есть в случае, когда u получит неопределенный.

вы получите данные после websitesSvc.getwebsites() обещание. так что если и нужно выполнить что-то после того, как получили эти данные, вы можете выполнить функцию внутри then, как показано ниже

websitesSvc.getwebsites().then(function(websites){ 
    $scope.websites = websites; 
    console.log($scope.websites); //It works here 
    $scope.methodAfterComplete(); 
}); 
$scope.methodAfterComplete = function() { 
    // this will call after completing the websitesSvc.getwebsites() 
}  

так что вы можете разместить свой код внутри methodAfterComplete метод, который требует $scope.websites данных. например ;

$scope.methodAfterComplete = function() { 
    var websites = new Bloodhound({ 
     datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.domain_name); }, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
       local:websites, 
     }); 

     // initialize the bloodhound suggestion engine 
     websites.initialize(); 

    $scope.numbersDataset = { 
    displayKey: 'domain_name', 
     source: websites.ttAdapter() 
    }; 

    // Typeahead options object 
    $scope.exampleOptions = { 
     highlight: true 
    }; 
}