角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

回答

相關問題