Question

我想知道如何在Typeahead的自定义模板的ng-src属性中使用函数。这是我的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中的一个函数，根据＆＃39; match.model＆＃39;来获取维基百科中的相应图像。 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;
            });
        });
    };


});

Answer 1

问题是您的模板没有您合理预期的范围。

解决方案是（取决于模板发生的位置）在函数前面链接一些$parent.调用。

有关详细信息，请参阅this git issue和this question。

Answer 2

实际上从ng-src调用函数时，你的问题是 NOT 。而是CORS [Cross-Resource-Origin-Sharing]。

以下是您的代码的Plunker： http://plnkr.co/edit/CvqhU9?p=preview

输入＆＃34; a＆＃34;，例如，在输入中然后检查控制台，你会发现它确实设法调用该功能。但等待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 cannot load an URL with jQuery

我希望这会有所帮助。

Angular UI Bootstrap Typeahead模板ng-src with function

2 个答案: