我有我的工作angularjs通过一个简单的书店的例子，我试图从主页一本书ID传递到服务编辑页面上，这样的书的详细信息可以呈现。我所发生的事情是，我可以看到其余的呼叫从我的主页被击中了正确的书籍ID传递进书服务。不过，我似乎无法想办法有 BookCtrl`当不同的页面调用REST服务加载数据。我期待的顺序是：
1）用户输入书籍ID编辑2）用户presses搜索按钮3）book.html页面加载4）BookEdit服务调用ID为从步骤1和25）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
相关推荐
最新文章