ng-src没有呈现任何值

时间:2015-10-23 14:30:49

标签: javascript angularjs

我使用角度1.4.5与django v1.8应用程序,并尝试为我的网站实现新的布局。 以下是我的观点:

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

角度控制器代码:

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

承诺更新后的html结果

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

以下是&#34;项目&#34;

的内容
[
{$$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将所有项目重复为Feed对象,但为什么花括号和ng-src不会编译或返回空值?

Ps:我也试过ng-src = {{feed.obj.text}},但结果没有改变..

2 个答案:

答案 0 :(得分:0)

应该是ng-src="{{feed.obj.text}}"。这是引号和双花括号。

如果不起作用,请在<pre>{{feed.obj | json}}</pre>之后和</a>之前粘贴<img>。这将让你看到对象的问题。

此外,由于您正在使用Django,请确保您将模板渲染为原始模板。否则django会认为双花括号是django模板。

答案 1 :(得分:0)

以下是您的代码的一部分:

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

您需要围绕正在插值的项目使用花括号。

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