Angular UI Bootstrap Typeahead template ng-src with funciton

Question

I'm wondering how to use a function in the ng-src attribute of the custom template for Typeahead. Here's my html template:

<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>

So in the custom template script, i'm trying to use a function in ng-src to get the corresponding image from Wikipedia based on the 'match.model' variable used by Typeahead.

And here's the Controller:

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;
            });
        });
    };


});

Gave you a point up, have no idea why your question got marked down in the first place. — Brian Ogden
– Brian Ogden, Commented Jun 17, 2014 at 4:17

Community · Accepted Answer · 2017-05-23 12:04:06Z

1

The issue is that your template does not have the scope you would reasonably expect it would.

The solution is (depending on where the template occurs) to chain some $parent. calls in front of your function.

See this git issue and this question for more details.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Jul 13, 2015 at 3:42

Brian Kent

3,8641 gold badge29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:15:20Z

0

Your problem is NOT actually with calling a function from ng-src. It is rather with CORS [Cross-Resource-Origin-Sharing].

Here is a Plunker for your code: http://plnkr.co/edit/CvqhU9?p=preview

Type "a", for example, in the input then check the console and you will find out that it did manage to call the function. BUT wait 2 secs and the following comes out:

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.

What this in short means is that when you are on www.foo.com domain, you cannot request a resource from www.bar.com unless www.bar.com enabled that. You can check out some answers about this here: XMLHttpRequest cannot load an URL with jQuery

I hope this helps.

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jun 17, 2014 at 4:15

Diana Nassar

2,30316 silver badges17 bronze badges

3 Comments

user2891488 Over a year ago

I don't think the XHR error you posted is the result of the 'getWikiImgs()' function, because the URL it can't load doesn't have the matching paramaters - that URL corresponds to the 'getWikiResults()' function that is returning an Angular '$http.get()'. By the way, I did have an issue with XHR and '$http.get()', but I found that it seems to be an issue with Chrome that was actually causing the error. Thanks for your answer, though.

Diana Nassar Over a year ago

You're welcome. Though I tried it on IE11 and it gave the same result. Are you getting anything in the console?

user2891488 Over a year ago

I'm thinking Plunker has some header settings that cause issues with XHR and CORS. I'm able to get it working locally in Chrome in my app (not on Plunker).

Collectives™ on Stack Overflow

Angular UI Bootstrap Typeahead template ng-src with funciton

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related