ng-重复重复元素但不显示ng-view内的内容

Question

我有一个控制器：

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

我有一个查看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>

当我在ng-view中加载视图时，列表被初始化，ng-repeat产生两个元素。但是{{item.path}}和{{item.id}}为空。我尝试用ng-src做，但结果是一样的。我很好奇它是否可以使用ng-bind只是为了看它是否会绑定内容并且它可以工作，但它不是我想要做的。当我将内容从items.html移动到主index.html视图时，一切正常。有没有人知道我做错了什么？

编辑：

这是一个有效的plunker。在我的机器上，我写道：

我得到的结果是：

Answer 1

我可能已经迟到了两年，但是我使用的是Jekyll，虽然奇怪的是源代码看起来完全相同，这意味着它应该有效，但它并没有。

正在为Liquid模板引擎保留{{ }}的原因。为了解决这个问题，我发现这段代码重新定义语法。

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

所以现在我可以使用[[ ]]而不是{{ }}来解决问题。

来源：http://www.noxidsoft.com/development/using-jekyll-and-angularjs-together/

Answer 2

您是否尝试过这样做：

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

没有init的Html？

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

Answer 3

我用mylescc的答案提出了plunker，而且工作正常：

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

当然，参考路径上没有图片，但是href链接显示正确。实际上你的代码工作得很好。见plunker。所以，在我看来，你还没有正确初始化angularjs。