Question

首先加载我的模板然后启动http请求，因为当我第一次加载页面时，它显示在控制台中找不到404图像src，但是在微秒成功加载数据之后。谷歌搜索后，我发现我们可以使用resolve属性来处理这种情况。下面是我对resolve的实现。

var app=angular.module('websiteApp',['ui.router']);

app.config(function($stateProvider,$urlRouterProvider,$httpProvider){
$urlRouterProvider.otherwise("/movies");
$stateProvider.state('movies',
    {
        url:"/movies",
        templateUrl:"views/movies.html",
        controller:"moviesController",
        resolve:
        {
         movieslist:moviesController.getallMovies
        }
    })});

我的控制器：

var moviesController=app.controller('moviesController',
function($scope,movieslist){
$scope.movies=movieslist.data.result
});

moviesController.getallMovies=function($q,$timeout,movieservice)
{
var defer=$q.defer();
$timeout(function(){
    defer.resolve(movieservice.getlist());
},1000);
return defer.promise;
}

我的服务：

app.factory('movieservice',function($http,$location){
var movieserviceObj={};
movieserviceObj.getlist=function(){
dataString={mode:'list',page:1,recordsperpage:10};
return $http({ url:'app/api/entertainment.php',data:$.param(dataString),method:'POST'});
};
return movieserviceObj;

}）;

我的模板[样本]：

<div class="col-sm-6 col-md-3" ng-repeat="movie in movies"> 
<img src='public/images/{{movie.image}}' style="width: 175px;"/> 
</div>

但是仍然我的movies.html在我的http请求（1秒延迟）之前加载，所以我的控制台错误仍然没有消失。这是在angularjs中实现解析的正确方法。

Answer 1

来自Angular文档（https://docs.angularjs.org/api/ng/directive/ngSrc）：

ngSrc - 模块ng中的指令

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

写它的错误方法：

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

写它的正确方法：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

加载模板前完成http请求

1 个答案:

ngSrc - 模块ng中的指令