0

I have a controller:

function ItemsController($scope, $http){
    $scope.init = function(){
        $scope.siteItems = [
            {id:'1', path:'img/1.png'},
            {id:'2', path:'img/2.png'}
        ];
    }
};

and I have a view items.html:

<div class="row" ng-controller="ItemsController" ng-init="init()">
  <div class="col-xs-6 col-md-3" ng-repeat="item in siteItems">
    <a href="#/item/{{item.id}}" class="thumbnail">
      <img src="{{item.path}}">
    </a>
  </div>
</div>

when ever I load the view inside the ng-view the list gets initialised and ng-repeat produces two elements. However {{item.path}} and {{item.id}} are empty. I tried to do it with ng-src but the result was the same. I was curious if it will work with ng-bind just to see if it will bind the content and it works but its not what Im trying to do. When ever I move the content from the items.html to the main index.html view everything works. Does anybody have an idea what am I doing wrong?

EDITED:

Here is a working plunker. On my machine I wrote it like:

enter image description here

and I get a result of: enter image description here

1
  • well in your ng-repeat you reference siteImages, but you set up siteItems in your controller.
    – tbthorpe
    Commented Nov 24, 2014 at 23:03

3 Answers 3

2

I landed this on this probably 2 years late, but I was using Jekyll and although it's strange that the source code look exactly the same, meaning it should work, it doesn't.

The reason being {{ }} is being reserved for Liquid template engine. To overcome this, I have found this code to re-define the syntax.

var myApp = angular.module('myApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

So now I can use [[ ]] instead of {{ }} and it works out.

Source: http://www.noxidsoft.com/development/using-jekyll-and-angularjs-together/

1
  • The same thing. Current project works on Node.JS + Swig views. Problem was solved by wrapping ng-repeat blocks in raw-blocks. {% raw %} <li ng-repeat="item in items">{{item.name}}</li> {% endraw %} Commented Aug 20, 2016 at 22:57
1

Have you tried doing it like this:

function ItemsController($scope, $http){
    $scope.items = [
        {id:'1', path:'img/1.png'},
        {id:'2', path:'img/2.png'}
    ];  
};

And the Html without the init?

<div class="row" ng-controller="ItemsController">
  <div class="col-xs-6 col-md-3" ng-repeat="item in items">
    <a href="#/item/{{item.id}}" class="thumbnail">
      <img src="{{item.path}}">
    </a>
  </div>
</div>
2
  • Yes I have and the result is exactly the same.
    – user1
    Commented Feb 1, 2014 at 14:45
  • From the Angular page on ngInit: "The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope." So I think this is the "right" approach even if it doesn't yet yield the results you need.
    – David Pope
    Commented Feb 1, 2014 at 15:51
0

I made a plunker out of mylescc's answer, and it's working fine:

<div class="row" ng-controller="ItemsController">
  <div class="col-xs-6 col-md-3" ng-repeat="item in items">
    <a href="#/item/{{item.id}}" class="thumbnail">
      <img src="{{item.path}}">
    </a>
  </div>
</div>

There is no picture at there referenced path, of course, but the href link is shown correctly. And actually your code works fine, too. See plunker. So, it seems to me, you haven't initialized angularjs correctly.

9
  • In my case the html that you wrote is in a separate file and I am biding the ng-view with it ... as I said if I put it in the main html file like you did it works.
    – user1
    Commented Feb 1, 2014 at 15:45
  • @user1. Why don't you produce a plunker or jsfiddle with the sample, it would be much easier to see what's wrong with your code.
    – zszep
    Commented Feb 1, 2014 at 15:47
  • plunker Here is a plunker. The strange thing is that its working
    – user1
    Commented Feb 1, 2014 at 16:23
  • I thought that producing a plunker by yourself would direct you in the right direction. So now you are sure you know how to do it, and there is surely some problem in your original code (missing reference, order of loading javascript files or something completely different). You know where to search from here on ...
    – zszep
    Commented Feb 1, 2014 at 16:32
  • Thanks but its not helping. I edited the post to show the result I get.
    – user1
    Commented Feb 1, 2014 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.