Question

我有一个ngRepeat，它遍历一个对象列表并显示它们。这些对象不包含任何图像，但ID可用于获取图像。在ngRepeat的内容中，我想显示与该对象相对应的图像，因此我在ngSource中调用一个函数来获取与当前对象相对应的图像。但是，ngSource无法加载到实际页面上。

HTML：

<div class="list-group">
  <a ng-click="courseSelected(course.course_id)" class="list-group-item" ng-repeat="course in searchResultData.courseList" id="searchResults">
    <div>
        <img ng-src="{{getLogoByCourse(course)}}"/>
        <h4 class="list-group-item-heading">{{course.name}}, {{course.city}}, {{course.state}}</h4>
        <p class="list-group-item-text miscData" ng-show="course.price"><span>Price: {{course.price}}</span></p>
        <p class="list-group-item-text miscData">
            <span>Phone number: {{course.phone}}</span><br/>
            <span>Address: {{course.address}}</span><br/>
            <span>Website: {{course.website}}</span>
        </p>
    </div>
  </a>
</div>

指令片段：

$scope.getLogoByCourse = function(course) {
    console.log("Getting logo");
    courseFactory.getLogoByID(course.course_id)
        .then(function(result){
            console.log("logo: ", result);
            result = "app/images/directory/" + result.data[0];
            return result;
        }
    );
}

$scope.getImageByCourse = function(course) {
    courseFactory.getImagesByID(course.course_id)
        .then(function(result){
            console.log("Image: ", result);
            result = "app/images/directory/" + result.data[0];
            return result;
        }
    );
}

加载页面上的图片标记内容：

<img class="logo-img">

Answer 1

问题是$scope.getLogoByCourse实际上并没有返回任何内容。看起来你正在尝试从promise中返回一个值，但由于它以异步方式返回，所以你总是得到undefined作为$scope.getLogoByCourse的返回值。

您可能需要考虑一次获取所有网址并将其加载到数组中。然后，您可以使用ng-repeat变量附加$index中的每个网址。

$scope.logos = [];

for (var i = 0; i < searchResultData.courseList.length; i++) {
    (function (j) {
        var course = searchResultData.courseList[j];
        courseFactory.getImagesByID(course.course_id)
            .then(function (result) {
                console.log("Image: ", result);
                result = "app/images/directory/" + result.data[0];
                $scope.logos[j] = result;
                $scope.$apply();
            }, function (error) {
                $scope.logos[j] = null;
            });
    )(i);
}

然后在你的模板中：

<img ng-src="{{ logos[$index] }}" />

Ng-src没有从范围调用函数

1 个答案: