ng-Directive getting called before ng-Controller to bind the data to HTML

Question

This is my first post in Stack and I'm new to Angular. I'm working on generating dynamic span tags instead of putting them in HTML. It works fine when I've static HTML code, but it doesn't work when its being called from Angular. Because ng-Directive is getting called before ng-Controller.

Here is the static HTML code

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

What I'm trying to do is in the following fashion.

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

My Controller code

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

}

Objects would be getting created in the following way.

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

etc ..

Do I need to follow anything else? Any ideas would be greatly appreciated.

I suspect your scroller directive is using an isolate scope. Can you provide your code for the scroller directive — Mark Santiago, Feb 15 '16 at 08:53

Rayon · Answer 1 · 2016-02-15T06:13:27.463

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

Try this:

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

edited Feb 15 '16 at 06:13

answered Feb 15 '16 at 06:11

Rayon

36,219
4
49
76

the above snippet is building in the following format
img1
for all span tags – Eswar M Feb 15 '16 at 06:19
That is how your static html is...Right ? – Rayon Feb 15 '16 at 06:20
I've put the static HTML code in the question itself. That's correct static HTMl – Eswar M Feb 15 '16 at 06:22
I understood it why.. My directive is getting called initially and then the controller. that's why its not getting binded. How can I bind the data initially itself in the directive call? – Eswar M Feb 15 '16 at 06:32
refer this: http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs – Rayon Feb 15 '16 at 06:34

ng-Directive getting called before ng-Controller to bind the data to HTML

1 Answers1