Шаблон Angular UI Bootstrap Typeahead ng-src с функцией

Мне интересно, как использовать функцию в атрибуте ng-src пользовательского шаблона для Typeahead. Вот мой html-шаблон:

<script type="text/ng-template" id="customTemplate.html">
    <a>
        <img ng-src="getWikiImgs({{match.model}})" width="16">
        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </a>
</script>
<div class="col-xs-10 center alt-txt-light">
    <span class="dash-pg-header-txt">Index an author!</span>
    <br/>
    <hr class="hr-separator"/>
    <br/>
    <div style="height: 1000px;">
        <h4>Search Wikipedia:</h4>
        <input type="text" ng-model="asyncSelected" placeholder="ie: John Bunyan" typeahead="item for item in getWikiResults($viewValue)" typeahead-wait-ms="500" typeahead-loading="loadingWikiResults" typeahead-template-url="customTemplate.html" class="form-control" />
        <br/>
        <i ng-show="loadingWikiResults" class="fa fa-refresh" style="text-align:left; float:left;"></i>
    </div>
</div>

Итак, в сценарии пользовательского шаблона я пытаюсь использовать функцию в ng-src для получения соответствующего изображения из Википедии на основе переменной match.model, используемой Typeahead.

А вот Контроллер:

angular.module("app").controller("AuthorCreateController", function($scope, $state, 

$stateParams, $http) {

    $scope.getWikiResults = function($viewValue) {

        return $http.get('http://en.wikipedia.org/w/api.php?', {
            params: {
                srsearch: $viewValue,
                action: "query",
                list: "search",
                format: "json"
            }
        }).then(function($response){
            var items = [];
            angular.forEach($response.data.query.search, function(item){
                items.push(item.title);
            });
            return items;
        });
    };

    $scope.getWikiImgs = function(title) {

        $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
        {
            action: "query",
            titles: title,
            prop: "pageimages",
            format: "json",
            pithumbsize: "70"
        },
        function(data) {
            $.each(data.query.pages, function(i,item){
                return item.thumbnail.source;
            });
        });
    };


});

person user2891488    schedule 17.06.2014    source источник
comment
Дал вам балл, понятия не имею, почему ваш вопрос был отмечен в первую очередь.   -  person Brian Ogden    schedule 17.06.2014


Ответы (2)


Проблема в том, что ваш шаблон не имеет той области действия, которую вы могли бы разумно ожидать.

Решение (в зависимости от того, где встречается шаблон) состоит в том, чтобы связать несколько вызовов $parent. перед вашей функцией.

См. эту проблему git и этот вопрос для более подробной информации.

person Brian Kent    schedule 13.07.2015

Ваша проблема НЕ на самом деле связана с вызовом функции из ng-src. Это скорее с CORS [Cross-Resource-Origin-Sharing].

Вот плункер для вашего кода: http://plnkr.co/edit/CvqhU9?p=preview

Введите, например, «a», затем проверьте консоль, и вы обнаружите, что ей удалось вызвать функцию. НО подождите 2 секунды, и появится следующее:

XMLHttpRequest cannot load http://en.wikipedia.org/w/api.php?&action=query&format=json&list=search&srsearch=a. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.

Вкратце это означает, что когда вы находитесь в домене www.foo.com, вы не можете запрашивать ресурс с www.bar.com, если только www.bar.com не разрешил это. Вы можете проверить некоторые ответы по этому поводу здесь: XMLHttpRequest не может загрузить URL-адрес с помощью jQuery< /а>

Надеюсь, это поможет.

person Diana Nassar    schedule 17.06.2014
comment
Пожалуйста. Хотя я пробовал это на IE11, и это дало тот же результат. У тебя что-то в консоли? - person Diana Nassar; 18.06.2014
comment
Я думаю, что у Plunker есть некоторые настройки заголовка, которые вызывают проблемы с XHR и CORS. Я могу заставить его работать локально в Chrome в моем приложении (не в Plunker). - person user2891488; 18.06.2014