ng-src doesn't render any value

Question

I'm using angular 1.4.5 with django v1.8 app, and trying to implement new layout for my website. Here is my view:

 <div class="page animsition" ng-app="AppUI">
    <div class="page-content padding-30 blue-grey-500"
         ng-controller="DisplayManageController">
        <ul>
            <li ng-repeat="feed in items">
                <a>{{ feed.type }}</a>
                <img ng-src="feed.obj.image"/>
                <em ng-bind="feed.obj.text"></em>
            </li>
        </ul>
    </div>
</div>

And the angular controller code:

var AppUI = angular.module('AppUI');
AppUI.controller('DisplayManageController', ['$scope', 'display', function ($scope, display) {
    $scope._display = display.items({'id': 71});
    $scope.items = [];
    $scope._display.$promise.then(function (result) {
        angular.forEach(result, function (value) {
            $scope.items.push(value);
        });
    });
}]);

And html result after promise updates

<li ng-repeat="feed in items" class="ng-scope">
    <a></a>
    <img ng-src="feed.obj.image" src="feed.obj.image">
    <em ng-bind="feed.obj.text" class="ng-binding">Blabla #somehashtagfromme</em>
</li>

Here is the content of "items"

[
{$$hashKey:"object:3",group_id: 1,id: "562a1a48942fbd0d9016617e",obj:{image:"https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12080420_855923527854550_1926591603_n.jpg",text:"Nefesler tutuldu"},type:"instagram"},
{$$hashKey:"object:2",group_id: 1,id: "5627a75e942fbd0d7ed19748",obj:{image:"https://pbs.twimg.com/media/CR2VePxUwAAVqtn.jpg", text:"bu zamanların ruhu"},type:"twitter"},
...
]

ng-repeat repeats all items as feed objects, but why curly braces and ng-src doesn't compile or returns empty values ?

Ps: I also tried ng-src={{feed.obj.text}} but result doesn't change ..

Have you tried `ng-src={{feed.obj.text}}` of `ng-src={{feed.obj.image}}`? Because what you've tried sound like a bug — Alon Eitan, Oct 23 '15 at 14:52
@SoluableNonagon here, i added items content. There is no null or undefined value in any item. My point is ng-bind is printing some values in any element, but no result in ng-src or any {{someobject_defined_in_controller_scope}}. — salik, Oct 23 '15 at 14:57
@Alon Yes, i tried both ng-src="{{feed.obj.text}}", ng-src={{feed.obj.image}}.No value in src attribute of image element. :( — salik, Oct 23 '15 at 14:59
Insert the line {{1 + 1}} as text (not as a directive or part of a tag). If it shows '2' then angular is working. If it shows {{1 + 1}} angular is not. If it shows nothing then Django is eating your template tags. Django also uses {{}} for jinja style templating. — wmil, Oct 23 '15 at 15:10
@wmil thank you, now I'm following this link also http://stackoverflow.com/questions/8302928/angularjs-with-django-conflicting-template-tags — salik, Oct 23 '15 at 15:11
@salik - have you include the `ngSanitize` module in your application? — Alon Eitan, Oct 23 '15 at 15:12

wmil · Accepted Answer · 2015-10-23T15:08:13.150

0

It should be ng-src="{{feed.obj.text}}". That's quotes and double curly brackets.

If that doesn't work, paste <pre>{{feed.obj | json}}</pre> after the </a> and before the <img>. That will let you see problems with the object.

Also, since you're using Django make sure your rendering the template raw. Otherwise django will think that the double curly brackets are django templates.

edited Oct 23 '15 at 15:08

answered Oct 23 '15 at 14:55

wmil

3,179
2
21
24

After your reply, i appended the `

{{feed.obj | json}}` in li element, and i got `TemplateSyntaxError: Invalid filter: 'json'` in django web app. Now i think problem is angular and django filters mixing somehow ...

– salik Oct 23 '15 at 15:08

score 0 · Answer 2 · answered Oct 23 '15 at 15:19

Here is a plunker of your code working:

http://plnkr.co/edit/khgxkLt2FjskrguWP5Js?p=preview

You do need curly braces around items being interpolated.

  <ul>
      <li ng-repeat="feed in items">
          <a>{{ feed.type }}</a>
          <img ng-src="{{feed.obj.image}}"/>
          <em ng-bind="{{feed.obj.text}}"></em>
      </li>
  </ul>

ng-src doesn't render any value

2 Answers2