我是 angular 新手,从 generator-angular 开始了一个简单的项目。
一定有一些东西不能与 usemin 和 $http 请求从 json 注入 url。
我能够让 yeoman.png 与缓存破坏一起使用,但由于某种原因,将图像 url 从 $http 请求加载到本地 json 似乎不起作用。
我通过将 '{{project.mainImg}}' 替换为 yeoman.png '{{image}}' 来测试 ng-repeat,并且效果很好。
这只是在运行 grunt build 并创建缓存清除后出现的问题。
gruntfile.js:
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: '<%= yeoman.dist %>/scripts/*.js',
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
patterns: {
js: [
[/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
},
控制器:
angular.module('testProjectApp')
.controller('MainCtrl', function ($scope, $http) {
$http.get('projects/projects.json').success(function(data) {
$scope.projects = data;
});
$scope.image = "images/yeoman.png";
});
html:
<img ng-src="{{image}}" alt="I'm Yeoman"><br>
<div class="project" ng-repeat="project in projects">
<a href="{{project.url}}" target="_blank" class="{{project.title}}">
<strong>{{project.title}}</strong>
<img ng-src="{{project.mainImg}}" width="100%" />
</a>
</div>