Question

我目前正在开发使用 angularJs 的 Ionic 应用。我还在网上运行了一个 Jhipster 制作的REST Web服务提供商应用程序，它为我的应用程序提供数据。

我目前所做的是，使用jhipster的REST API调用获取完整的（文本+图像数据）JSON。文本数据包括人们的身份，姓名，地址等信息，图像数据是人物的图片。

我希望做的是加载图像，即启动文本数据的API调用，然后在页面上呈现文本数据，然后单独调用每个图像。

我已经为文本数据准备了单独的API，而另一个API则根据id获取单个图像。

这不是我的问题我想在< img >标记中激活我的API调用。呈现列表后，与< img >关联的指令/服务将获取用户的people.id并将其传递给函数，然后该函数将激活我的API调用获取图像，带来响应（图像）并绑定它到< img >。

<div class="list">
    <div class="item item-thumbnail-left item-text-wrap item-avatar"
         ng-repeat="item in peoples ">

        <img ng-src="data:image/png;base64,{{item.image}}" alt="{{item.name}} Photo" err-src="img/people.png">

        <h2> {{item.firstName}} </h2>
        <span>   {{item.emailId}} </span>

    </div>
</div>

Answer 1

你可以稍微改变一下以使其发挥作用。例如，不要像现在这样对数据进行绑定，而是将其更改为一个可以一次性返回整个数据的函数。

类似于：<img ng-src="{{getMyData(yourID)}}" >

然后在getMyData函数内部执行所需操作，启动db调用并返回所需内容。您也可以应用ng-cloak，因为调用需要一段时间才能执行并恢复数据。

$scope.getMyData = function(id)
        {
            //api work
            //create return string
            return 'the whole thing'
        }

使用angularjs动态加载图像

1 个答案: