我有一个简单的书店示例,我正在为 angularjs 处理该示例,并且我正在尝试将书籍 ID 从主页传递到编辑页面上的服务中,以便可以呈现书籍详细信息。我所发生的情况是,我可以看到从我的主页点击其余调用,并将正确的图书 ID 传递到图书服务中。但是,我似乎无法想出一种方法让 BookCtrl` 在不同页面调用其余服务时加载该数据。我期望的顺序是:
1) User enters a book ID to edit
2) User presses Search button
3) book.html page is loaded
4) BookEdit service is invoked with ID from Steps 1 and 2
5) ng-model for book loads data.
提前致歉,由于我是从另一台计算机修改此代码,因此可能会出现一些错误,因此无法复制/粘贴
代码如下:
home.html
<div ng-controller="HomeCtrl">
<div>
<label for="query">Book to edit</label>
<input id="query" ng-model ="editBook.query">
<button ng-click="loadBookById()">Search</button>
</div>
</div>
home.js:
var homeApp = angular.module('bookHome',['bookEdit']);
homeApp.controller('HomeCtrl',function($scope,$http,bookEditService)
{
$http.get('http://get/your/books/rest').success(function(data){
$scope.library = data;
});
$scope.editBook = {
query: '',
service:'bookEditService'
} ;
$scope.loadBookById = function()
{
$scope.$emit('loadBookById',{
query:$scope.editBook.query,
$service: $scope.editBook .service
}
$scope.$on('loadBookById', function(ev,search){
bookEditService.loadBook({
bookId: $scope.editBook.query
},
$scope.searchComplete,
$scope.errorSearching
);
});
$scope.searchComplete = function(results) {
$scope.results = results;
};
$scope.errorSearch= function(data,status,headers,config){
console.log(data);
// ...
};
}
书.html
<div ng-controller="BookCtrl" >
<div ng-model="details.title"></div>
<div ng-model="details.author"></div>
</div>
bookEdit.js
var bookEditApp = angular.module('bookEdit',[]);
bookEditApp.service('loadBook',function($http){
return{
loadBookById: function(params,success,error){
$http({
url: 'http://path/to/book/editing',
method: 'GET',
params:{bookId: params.bookId}).success(function(data,status,headers,config)
{
var results = data;
success(results || []);
}).error(function(){
error(arguments);
});
}
};
});
bookEditApp.controller('BookCtrl',function($scope){
$scope.details = {
title: "",
author: ""
};
});
最佳答案
遵循您期望的顺序的替代方案是:
1) 用户输入图书 ID 并按下按钮
2) HomeCtrl 以输入的 id 作为路由参数路由到 EditCtrl(还不需要使用图书服务):
app.controller('HomeCtrl', function ($scope, $location) {
$scope.editBook = function () {
$location.path('/edit/' + $scope.id);
};
});
3) EditCtrl 被加载,检索路由参数并向图书服务请求正确的图书:
app.controller('EditCtrl', function EditCtrl($scope, $routeParams, bookService, $location) {
$scope.loading = true;
bookService.getBookById($routeParams.id)
.then(function (result) {
$scope.book = result;
$scope.loading = false;
});
4) 当书籍加载时,模型 ($scope.book
) 会被填充并更新 html
这是一个工作示例,希望能够提供一些进一步的指导和想法:http://plnkr.co/edit/fpxtAU?p=preview
关于javascript - Angularjs 在不同页面上的服务之间传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19727131/