2016-04-10 2 views
0

Я не знаком с функцией JavaScript Promises.Javascript Promises on Angular Controller

В настоящее время у меня есть этот код на моем углового контроллере

$http.get('pages/about.html').then(function(response) { 
    var raw_html = response.data; 
    $scope.aboutHTML = raw_html.replace(/</g,"&lt;"); 
}); 

Я хочу, чтобы переписать код так, что я мог сделать что-то вроде этого

$scope.indexHTML = getHTML('pages/index.html'); 
$scope.aboutHTML = getHTML('pages/about.html'); 
... 

с функцией, как это

function getHTML(url){ 
    $http.get(url).then(function(response) { 
     var raw_html = response.data; 
     return = raw_html.replace(/</g,"&lt;"); 
    }); 
} 

Как правильно написать код для функции выше?

[Update # 1]

Временное решение по @charlietfl

function getHTML(url){ 
    // return the promise 
    return $http.get(url).then(function(response) { 
     var raw_html = response.data.replace(/</g,"&lt;"); 
     return raw_html; 
    }); 
} 

getHTML('pages/index.html').then(function(raw_html){ 
    $scope.indexHTML = raw_html; 
}); 

Я хочу, чтобы написать эту функцию, чтобы уменьшить ручную работу, с таким образом я все еще нужно записать $ рамки. {page} для каждой страницы, чтобы кто-нибудь знал лучший способ?

[Update # 2]

Решение по @joeytwiddle

function getHTML(url){ 
    // return the promise 
    return $http.get(url).then(function(response) { 
     var raw_html = response.data.replace(/</g,"&lt;"); 
     return raw_html; 
    }); 
} 

getHTML('pages/index.html').then(function(raw_html){ 
    $scope.indexHTML = raw_html; 
}); 
+0

Если вы используете * угловой ui router *, есть * чистый * способ достичь этого с помощью 'resolve'. Если вы используете маршрутизатор ui, то проверьте это: http://bguiz.github.io/js-standards/angularjs/resolving-promises-for-a-controller/ –

ответ

1

Невозможно просто вернуть результат, потому что результат будет недоступен до некоторого времени в будущем. #asynchronous

Обработать результат можно только с помощью функции обратного вызова.

Если вы хотите, чтобы свести к минимуму работы снаружи, я хотел бы предложить что-то вроде этого:

getHTMLAndStore('pages/index.html', $scope, 'indexHTML'); 
getHTMLAndStore('pages/about.html', $scope, 'aboutHTML'); 

function getHTMLAndStore(url, object, property) { 
    $http.get(url).then(function(response) { 
     var raw_html = response.data; 
     var weird_html = raw_html.replace(/</g,"&lt;"); 
     object[property] = weird_html; 
    }).catch(console.error.apply(console)); 
} 

Это чистый JS, а не на самом деле, связанное с Угловым.

Обратите внимание, что эти два запроса будут срабатывать параллельно, а не последовательно.

1

$http возвращает обещание, так что вы должны вернуть это обещание из функции и использовать другой then() присвоить переменную области видимости:

function getHTML(url){ 
    // return the promise 
    return $http.get(url).then(function(response) { 
     var raw_html = response.data.replace(/</g,"&lt;"); 
     return raw_html; 
    }); 
} 

getHTML('pages/index.html').then(function(raw_html){ 
    $scope.indexHTML = raw_html; 
}); 

В настоящее время действует ваша функция ничего не возвращает

+1

Нет ... Вы не можете вернуть асинхронный ответ от функции – charlietfl