Question

我正在使用通用模板并根据URL参数的值获取要显示在其中的JSON数据。

服务

angular.
module('coreModule.art').
factory('Art', ['$resource', 
    function ($resource) {
        return $resource('json/:artPage.json', {}, {
            query: {
                method: 'GET',
                isArray: true
            }
        });
    }
]);

路由

$routeProvider.
            when('/:artPage', {
                template: '<art-page></art-page>'
            })

组件

angular.module('artPage').
    component('artPage', {
        templateUrl: 'app/artTemplate.html',
        controller: ['$routeParams', 'Art', 
            function ArtController ($routeParams, Art) {
                this.artWorks = Art.query({artPage: $routeParams.artPage});
            }
        ]
    });

模板

<div ng-repeat="artWork in $ctrl.artWorks">

  <img ng-src="img/doodles_thumbnails/{{artWork.source}}.jpg">      

</div>

在这种情况下，URL是'/ doodles'，因此'doodles'是服务中'artPage'参数的值。目前，ng-src属性正在从'doodles_thumnbails'文件夹中加载图像。我想在ng-src属性中使这个值通用。

所以，对于另一个视图，如果我正在加载URL'/ paintings'的图像，它将来自名为'paintings_thumbnails'的文件夹。要实现这一点，我应该将ng-src属性更改为？

我正在使用Angular v1.6.1。我是Angular的新手，所以请忍受任何无知。

Answer 1

component('artPage', {
    templateUrl: 'app/artTemplate.html',
    controller: ['$routeParams', 'Art', 
        function ArtController ($routeParams, Art) {
            this.artType = $routeParams.artPage
            this.artWorks = Art.query({artPage: this.artType});
        }
    ]
});

然后在标记中：

<div ng-repeat="artWork in $ctrl.artWorks">

  <img ng-src="img/{{artType}}_thumbnails/{{artWork.source}}.jpg">      

</div>

在ng-repeat中使用ng-src的$ resource参数

1 个答案: