Ruby on rails AngularJs和NGR资源范围
我正在学习angularjs,在理解这个概念如何工作时遇到了一些困难 在控制器中,我具有以下功能:Ruby on rails AngularJs和NGR资源范围,ruby-on-rails,angularjs,Ruby On Rails,Angularjs,我正在学习angularjs,在理解这个概念如何工作时遇到了一些困难 在控制器中,我具有以下功能: Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) { $scope.selected_customer = resource.customer; console.log($scope.selected_customer); }, function(response) { }
Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
$scope.selected_customer = resource.customer;
console.log($scope.selected_customer);
}, function(response) {
});
这很有效。它从服务器端检索数据(我使用的是rails)和console.log
显示了我的期望
我遇到的问题是访问$scope.selected\u客户
例如,在下一个例子中,第二个日志不会显示我期望的客户对象,而是一个角度对象,这可能是一个承诺?(我正在使用不稳定的1.1.4供参考)
因此,如果我想要一个模板来显示有关该客户的信息,那么此时就不可能了
这是完整的控制器。您可以看到我想要检索对象,然后更改位置
这将是用于编辑此选定客户的模板:
function CustomersEditController($scope, $location, Customer) {
$scope.edit_customer = function(customer_id) {
Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
$scope.selected_customer = resource.customer;
$location.path('/customers/' + customer_id_id + '/edit');
}, function(response) {
console.log('ERROR');
});
};
};
这很好,只是因为范围问题,它没有用所选的客户属性填充表单
这是我的服务:
var customer_service = angular.module('customer_service', ['ngResource', 'ui']);
customer_service.factory('Customer', function($resource) {
return $resource('/customers/:id/:action', {id: '@id'}, {
update: { method: 'PUT' }
});
});
我的表单位于模板中(使用slim)
我正在使用routeProvider:
angular.module('customer_app', ['customer_service'])
.config(['$routeProvider', function($provider) {
$provider.when('/:customer_id/edit/', { templateUrl: '/assets/customers/edit.html.slim', controller: 'CustomersController' });
}])
.config(["$httpProvider", function(provider) {
provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
}]);
下面是我的rails索引页,它让聚会开始:
只是:
div(ng-app="customer_app")
h1 Customers
div(ng-view)
任何可能我遗漏(或误解)的文档帮助或链接都将非常棒 根据您发布的JavaScript,您的控制器是
CustomersEditController
。但是,当您使用$location.path
切换URL时,您的$routeProvider
会加载新路由,而不是实例化CustomerController
(通过$routeProvider
定义)
当Inver$routeProvider
为您更改路由并创建控制器实例时,您的旧控制器会消失——因此,当您更改URL时,$scope
上的数据会丢失(新控制器有自己的作用域)
要解决此问题,您可以在到达新控制器时加载用户:
function CustomersEditController($scope, $location) {
$scope.edit_customer = function(customer_id) {
$location.path('/customers/' + customer_id_id + '/edit');
};
};
function CustomersController($scope, $location, $routeParams, Customer) {
var customer_id = $routeParams.customer_id; // from $routeProvider
Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
$scope.selected_customer = resource.customer;
}, function(response) {
console.log('ERROR');
});
};
当然,如果用户ID无效,则必须显示错误或重定向回上一个URL
另一个选项是在路线配置上使用resolve
属性。基本上,resolve
允许您定义新控制器将需要的数据,并且您可以确保在切换到新路由并将数据注入新控制器之前所述数据可用。通过使用,还可以使用异步加载的数据
$routeProvider.when('/:customer_id/edit/', {
templateUrl: '/assets/customers/edit.html.slim',
controller: 'CustomersController',
resolve: {
customer: ['$q', '$route', 'Customer', function($q, $route, Customer) {
var deferred = $q.defer()
var customer_id = $route.current.params.customer_id;
Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
// got our user; change routes now
deferred.resolve(resource.customer);
}, function(response) {
// Uh oh! No user found. Cancel changing routes
// and trigger a $routeChangeError event
deferred.reject(response);
});
// returning the promise ensures the route won't change
// until the deferred that generated the promise is resolved
return deferred.promise;
}]
}
});
// lower-case customer is injected based on name from `resolve` in route
function CustomersController($scope, $location, customer) {
$scope.selected_customer = customer;
};
根据您发布的JavaScript,您的控制器是
CustomersEditController
。但是,当您使用$location.path
切换URL时,您的$routeProvider
会加载新路由,而不是实例化CustomerController
(通过$routeProvider
定义)
当Inver$routeProvider
为您更改路由并创建控制器实例时,您的旧控制器会消失——因此,当您更改URL时,$scope
上的数据会丢失(新控制器有自己的作用域)
要解决此问题,您可以在到达新控制器时加载用户:
function CustomersEditController($scope, $location) {
$scope.edit_customer = function(customer_id) {
$location.path('/customers/' + customer_id_id + '/edit');
};
};
function CustomersController($scope, $location, $routeParams, Customer) {
var customer_id = $routeParams.customer_id; // from $routeProvider
Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
$scope.selected_customer = resource.customer;
}, function(response) {
console.log('ERROR');
});
};
当然,如果用户ID无效,则必须显示错误或重定向回上一个URL
另一个选项是在路线配置上使用resolve
属性。基本上,resolve
允许您定义新控制器将需要的数据,并且您可以确保在切换到新路由并将数据注入新控制器之前所述数据可用。通过使用,还可以使用异步加载的数据
$routeProvider.when('/:customer_id/edit/', {
templateUrl: '/assets/customers/edit.html.slim',
controller: 'CustomersController',
resolve: {
customer: ['$q', '$route', 'Customer', function($q, $route, Customer) {
var deferred = $q.defer()
var customer_id = $route.current.params.customer_id;
Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) {
// got our user; change routes now
deferred.resolve(resource.customer);
}, function(response) {
// Uh oh! No user found. Cancel changing routes
// and trigger a $routeChangeError event
deferred.reject(response);
});
// returning the promise ensures the route won't change
// until the deferred that generated the promise is resolved
return deferred.promise;
}]
}
});
// lower-case customer is injected based on name from `resolve` in route
function CustomersController($scope, $location, customer) {
$scope.selected_customer = customer;
};
表单在哪里?您如何填充它(它如何连接到范围)?我在主帖子中添加了表单。您是否使用了
$routeProvider
和ngView
?如果是这样的话,我们可以看看你的角度路线吗?我更新了主帖,显示了路线提供者。我的主rails索引页面上有一个ngView。我也把它放在上面了。页面呈现、位置切换和我想要的表单显示方式与我的需要一致,除了文本字段为空而不是显示名称。表单在哪里以及如何填充它(它如何连接到范围)?我在主帖子中添加了表单。您是否使用$routeProvider
和ngView
?如果是这样的话,我们可以看看你的角度路线吗?我更新了主帖,显示了路线提供者。我的主rails索引页面上有一个ngView。我也把它放在上面了。页面呈现,位置切换,我想要的表单显示的正是我所需要的,除了文本字段为空而不是显示名称。谢谢,这非常有用!在尝试此操作之前,我注意到如果我执行a(href='#/customers/{{customer.id}}}/edit'),并且提供程序将路由到editCustomerController,如果我执行$scope.selected_customer=resource.customer,customer.get将工作并填充表单。但是,该变量在其他控制器方法中仍然不可用。再次感谢!谢谢,真是太有帮助了!在尝试此操作之前,我注意到如果我执行a(href='#/customers/{{customer.id}}}/edit'),并且提供程序将路由到editCustomerController,如果我执行$scope.selected_customer=resource.customer,customer.get将工作并填充表单。但是,该变量在其他控制器方法中仍然不可用。再次感谢!