在服务之间不同的页面上存在Angularjs传数据 [英] Angularjs pass data in between services that exist on different pages
问题描述
我有我的工作angularjs通过一个简单的书店的例子，我试图从主页一本书ID传递到服务编辑页面上，这样的书的详细信息可以呈现。我所发生的事情是，我可以看到其余的呼叫从我的主页被击中了正确的书籍ID传递进书服务。不过，我似乎无法想办法有 BookCtrl`当不同的页面调用REST服务加载数据。我期待的顺序是：
1）用户输入书籍ID编辑
2）用户presses搜索按钮
3）book.html页面加载
4）BookEdit服务调用ID为从步骤1和2
5）NG-模型本书加载数据。
在提前道歉，可能会有一些错误，因为我是从不同的计算机修改此code，所以我不能复制/粘贴结果
低于code：
home.html的
＆LT; DIV NG控制器=HomeCtrl＆GT;
＆LT; DIV＆GT;
＆LT;标签=查询＆GT;图书编辑＆LT; /标签＆gt;
＆LT;输入ID =查询NG模型=editBook.query＆GT;
＆LT;按钮NG点击=loadBookById（）＆GT;搜索和LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
home.js：
VAR homeApp = angular.module（'bookHome'，['bookEdit']）;
homeApp.controller（'HomeCtrl'，函数（$范围，$ HTTP，bookEditService）
{
$ http.get（的http：//获取/你/书籍/休息'）.success（功能（数据）{
$ scope.library =数据;
}）; $ scope.editBook = {
查询：''，
服务：bookEditService
}; $ scope.loadBookById =功能（）
{
$范围。$放出（'loadBookById'，{
查询：$ scope.editBook.query，
$服务：$ scope.editBook。服务
} $范围。在$（'loadBookById'，函数（EV，搜索）{
bookEditService.loadBook（{
BOOKID：$ scope.editBook.query
}，
$ scope.searchComplete，
$ scope.errorSearching
）;
}）;
$ scope.searchComplete =功能（结果）{
$ scope.results =结果;
}; $ scope.errorSearch =功能（数据，状态，头，配置）{
的console.log（数据）;
// ...
};
}
book.html
＆LT; DIV NG控制器=BookCtrl＆GT; ＆LT; DIV NG模型=details.title＆GT;＆LT; / DIV＆GT;
＆LT; DIV NG模型=details.author＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
bookEdit.js
VAR bookEditApp = angular.module（'bookEdit'，[]）;
bookEditApp.service（'loadBook'，函数（$ HTTP）{
返回{
loadBookById：函数（参数，可以成功，错误）{
$ HTTP（{
网址：HTTP：//路径/要/电子书/编辑'，
方法：GET，
PARAMS：{BOOKID：params.bookId}）成功（功能（数据，状态，头，配置）
{
VAR的结果=数据;
成功（结果|| []）;
}）错误（函数（）{
错误（参数）;
}）;
}
};
}）;bookEditApp.controller（'BookCtrl'，函数（$范围）{
$ scope.details = {
标题：，
作者：
};
}）;
这下面你所期望的顺序的替代方法是：
1）用户输入书籍ID和presses按钮
2）HomeCtrl路由EditCtrl与输入的ID作为路径参数（不需要使用书服务尚未）：
app.controller（'HomeCtrl'，函数（$范围，$位置）{ $ scope.editBook =功能（）{
$ location.path（'/编辑/'+ $ scope.id）;
}; }）;
3）EditCtrl加载，检索路线参数和要求对正确书的书服务
app.controller（'EditCtrl'，功能EditCtrl（$范围，$ routeParams，bookService的，$位置）{ $ scope.loading = TRUE; bookService.getBookById（$ routeParams.id）
。然后（功能（结果）{
$ scope.book =结果;
$ scope.loading = FALSE;
}）;
4）当本书加载模型（ $ scope.book ）填充和HTML更新
下面是一个工作的例子，希望能提供一些进一步的指导和想法： HTTP： //plnkr.co/edit/fpxtAU?p=$p$pview
I have a simple book store example that I am working through for angularjs and I am trying to pass a book id from a home page into a service on an edit page so that the book details can be rendered. What I have happen is I can see the rest call being hit from my home' page with the correct book id being passed into the book service. However, I cannot seem to think of a way to have theBookCtrl` load that data when a different page invokes the rest service. The order I am expecting is:
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.
Apologies in advance, there may be some errors as I was modifying this code from a different computer, so I couldn't copy/paste
code below:
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);
// ...
};
}
book.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: ""
};
});
An alternative that follows the order you are expecting is:
1) User enters book id and presses button
2) HomeCtrl routes to EditCtrl with the entered id as a route parameter (no need to use the book service yet):
app.controller('HomeCtrl', function ($scope, $location) {
$scope.editBook = function () {
$location.path('/edit/' + $scope.id);
};
});
3) EditCtrl is loaded, retrieves the route parameter and asks the book service for the correct book:
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) When book is loaded the model ($scope.book) is populated and the html is updated
Here is a working example that hopefully will give some further guidance and ideas: http://plnkr.co/edit/fpxtAU?p=preview
这篇关于在服务之间不同的页面上存在Angularjs传数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
