角ui路由器不能解析$ http.get

我想使用ui路由器的解析功能，而不是附加服务的控制器中的返回值（到$范围），但我卡住了。

这里是我的普拉克 http://plnkr.co/edit/m94IqBpgbEjtuLBhQVB6?p=preview

HTML

<!doctype html> 
<html lang="en" ng-app="restprac"> 

<head> 
    <meta charset="UTF-8"> 
    <title>REST!</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div ui-view></div> 
</body> 

</html>

image.html

<img ng-src="{{image}}">

的Javascript

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

app.config(['$stateProvider', function($stateProvider) { 
    $stateProvider.state("singleImage", { 
    url: "/", 
    templateUrl: image.html, 
    resolve: { 
     Image: 'Image', 
     imageResource: function(Image) { 
     return imageResource.query().$promise; 
     } 
    }, 
    controller: 'ImageController' 
    }); 
}]); 


app.factory('Image', ['$http', function($http) { 
    return $http.get('https://httpbin.org/image'); 
}]); 

app.controller('ImageController', ['$scope', 'Image', function($scope, Image) { 
    $scope.image = Image; 
}]);

来源

2016-01-23 salep

您没有任何用户界面视图的任何地方。所以你实际上不使用ui-router。 –

谢谢，我编辑了我的问题。 – salep

有许多公关oblems：

你没有定义templateUrl的状态;
imageResource解析属性是无用的，没有在任何地方使用，并使用未定义的imageResource变量;
URL https://httpbin.org/image指向一个实际图像，并且您试图将该图像用作img标记的src属性，该标记需要一个URL而不是图像;
您忘记从HTTP响应中获取数据。
你不导航到状态

这里有一个修改plunkr：http://plnkr.co/edit/uCXDOBEFNyaYkuIegY0N?p=preview

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

app.config(['$stateProvider', function($stateProvider) { 
    $stateProvider.state("singleImage", { 
    url: "/", 
    templateUrl: 'template.html', 
    resolve: { 
     imageUrl: 'image', 
    }, 
    controller: 'ImageController' 
    }); 
}]); 

app.run(function($location) { 
    $location.path('/'); 
}); 

app.factory('image', ['$http', function($http) { 
    return $http.get('imageUrl.txt').then(function(response) { 
    return response.data; 
    }); 
}]); 

app.controller('ImageController', ['$scope', 'imageUrl', function($scope, imageUrl) { 
    $scope.imageUrl = imageUrl; 
}]);

来源

2016-01-24 00:16:27

感谢您的回答，但更重要的是，感谢您的耐心等待。 – salep

角ui路由器不能解析$ http.get

回答

相关问题