为什么不从HTTP请求生成md-grid-list?

时间:2015-04-23 22:56:55

标签: javascript angularjs

我想发送一个HTTP请求来获取JSON并根据它生成md-grid-list。但它似乎没有用。

我在控制器中写了那个请求。

如果我用其他普通元素(例如table和td等)替换md-grid-list,它就可以了。或者,如果我根据其他地方的JSON加载另一个普通元素,例如像{{posterPlaying.posters}}这样的纯文本,它也可以工作。

怎么回事?似乎它必须是md-grid-list的一些特殊属性。

HTML:

<md-content layout="row" ng-controller="posterPlayingController as posterPlaying" id="poster-page">

    <md-content layout="column" id="poster-container">
        <md-grid-list
            md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
            md-row-height-gt-md="2:3" md-row-height="2:3"
            md-gutter="8px" md-gutter-gt-sm="4px" >
            <md-grid-tile ng-repeat="poster in posterPlaying.posters"
                          md-rowspan="{{poster.span.row}}"
                          md-colspan="{{poster.span.col}}"
                          md-colspan-sm="1"
                          ng-class="poster.background" >
                <md-button aria-label="" class="poster-button" ng-click="showVote($event)">

                      <img src="{{poster.image}}" class="md-card-image poster-card-image" alt="Washed Out">
                </md-button>
            </md-grid-tile>
      </md-grid-list>
</md-content>

services.js

(function (angular, undefined) {
    "use strict";
    angular
        .module('services', ['ngResource'])
        .factory('Poster', Poster);

    Poster.$inject = ['$resource'];
    function Poster($resource) {
        return $resource('data/posters.json', {}, {
            query: {
                method: "get",
                params: {},
                isArray: true
            }
        })
    }
})(angular);

内部posterPlayingController

vm.posters = Poster.query(function (response) {
            var data = response.map(function (item, index, array) {
                item.position = item.id % 2;
                if (item.id % 5 == 0) {
                    item.span = {
                        'row': 2,
                        'col': 2
                    }
                } else {
                    item.span = {
                        'row': 1,
                        'col': 1
                    }
                }
                return item;
            });
            return data;
        });

0 个答案:

没有答案