Question

使用Anguar UI-Router，我配置了以下状态：

angular.module('foos').config(['$stateProvider',
function($stateProvider) {
    $stateProvider.
    state('seeFoos', {
        url: '/foos',
        templateUrl: 'modules/foos/client/views/list-foos.client.view.html',
        controller: 'FoosController',
        resolve: {
          initialData : function(Foos) {
            return Foos.query();
          }
        }
    });
}
]);

在我看来，我使用ng-repeat通过从服务中获取图像名称来加载一些图像。

<section>
<div class="row">
    <div class="col-xs-12 col-sm-6 top15"
        ng-repeat-start="foo in bar">
        <h4 ng-bind="foo.name"></h4>
        <div class="row">
            <a href="{{foo.link}}"> 
                <img alt="{{foo.name}}" src="modules/foos/client/img/{{foo.imgName}}" class="col-xs-4" />
            </a>
        </div>
    </div>
    <div class="clearfix" ng-if="$index%2==1"></div>
    <div ng-repeat-end=""></div>
</div>
</section>

请注意，我确保Foos.query（）在加载模板之前解析。然后控制器将结果加载到bar

上的scope

angular.module('foos').controller('FoosController', ['$scope', '$stateParams', '$location', 'Foos', 'initialData',
  function($scope, $stateParams, $location, Foos, initialData) {
    $scope.bar = initialData;
  }
]);

一切都按预期工作，除了以下额外的HTTP GET，它返回404错误：

GET /modules/foos/client/img/%7B%7Bfoo.imgName%7D%7D

在状态配置中添加resolve选项后，我不明白为什么会生成该请求。

Answer 1

使用ng-src代替src可以解决主要问题。来自documentation ...

在{{hash}}属性中使用src之类的Angular标记无法正常工作：浏览器将使用文字文本{{hash}}从URL中获取，直到Angular替换{{hash}}内的表达式1}}。 ngSrc指令解决了这个问题。

其次，在完成状态加载之前，您的resolve函数不会等待查询完成。这是$resource actions ...

中的设计

重要的是要意识到调用$ resource对象方法会立即返回一个空引用（对象或数组，具体取决于isArray）。从服务器返回数据后，将使用实际数据填充现有引用。

如果希望等待，请将resolve更改为

resolve: {
  initialData : function(Foos) {
    return Foos.query().$promise;
  }
}

最后，您只需使用ng-if="$odd"代替ng-if="$index%2==1"。

为什么我的ng-repeat指令会创建无效的HTTP请求？

1 个答案: