javascript - ng-Directive 在 ng-Controller 之前被调用以将数据绑定(bind)到 HTML

Question

这是我在 Stack 中的第一篇文章，我是 Angular 的新手。我正在努力生成动态跨度标签，而不是将它们放在 HTML 中。当我有静态 HTML 代码时它工作正常，但当它从 Angular 调用时它不起作用。因为 ng-Directive 在 ng-Controller 之前被调用。

这是静态HTML代码

<scroller height="150" width="200" padding="5" ng-model="test">

<span><a href="http://www.google.com" target="_blank"><img src="images/img1.png"/></a><p class="title">img0</p></span>
<span><a href="http://www.google.com" target="_blank"><img src="images/img1.png"/></a><p class="title">img1</p></span>
<span><a href="http://www.google.com" target="_blank"><img src="images/img1.png"/></a><p class="title">img2</p></span>
</scroller>

我想做的是以下方式。

<scroller height="150" width="200" padding="5" ng-model="test">
    <div ng-repeat="image in imagesArray">

        <span><a href="http://www.google.com" target="_blank"><img ng-src='{{image.img}}'/></a><p class="imgtitle">{{image.title}}</p></span>

      </div>
      </scroller>

我的 Controller 代码

function myCtrl($scope,$http){
 $scope.test = 0;  
 $http.get("data.json")
  .then(function(response) {
    var data = response.data;
    $scope.imagesArray = response.data.imagesArray || [];
    console.log($scope.imagesArray);
  });

对象将通过以下方式创建。

[Object, Object, Object, Object, Object, Object, Object]
0: Object
img: "images/img1.png"
title: "img1 "

等..

我还需要做其他事情吗？任何想法将不胜感激。

Answer 1

You need to repeat span elements. Current code will repeat div elements which will create multiple block level elements which is not the expected output.

ngRepeat directive instantiates a template once per item from a collection

试试这个:

<scroller height="150" width="200" padding="5" ng-model="test">
  <span ng-repeat="image in imagesArray"><a href="http://www.google.com" target="_blank"><img ng-src='{{image.img}}'/></a><p class="imgtitle">{{image.title}}</p></span>
</scroller>