AngularJs и ngResource scope

Question

Я изучаю angularjs и имею некоторые проблемы с пониманием того, как эта концепция работает.

В контроллере у меня есть следующие:

Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) { 
    $scope.selected_customer = resource.customer; 
    console.log($scope.selected_customer); 
}, function(response) { 
}); 

Это работает. Он извлекает данные со стороны сервера (я использую рельсы), а console.log показывает, чего я ожидал бы.

Концепция, с которой я столкнулся, - это доступ к $ scope.selected_customer.

Например, в этом следующем случае второй журнал не покажет объект клиента, который я ожидаю, но вместо этого его угловой объект, который может быть обещанием? (Я использую неустойчивый 1.1.4 fyi).

test = Customer.get({id: customer_id, action: 'edit', format : 'json'}, function(resource) { 
    $scope.selected_customer = resource.customer; 
    console.log($scope.selected_customer); 
}, function(response) { 
}); 

// undefined 
console.log($scope.selected_customer); 
// angular object b{$resolved: false, $then: function, $get: function, $save: .... } 
console.log(test); 

Поэтому, если я хочу, чтобы шаблон отображал информацию об этом клиенте, на данный момент его невозможно.

Вот полный контроллер. Вы можете видеть, что я хочу, чтобы получить объект, а затем изменить расположение , который будет что шаблон для редактирования этого выбранного клиента:

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'); 
    }); 
    }; 
}; 

Это работает отлично кроме этого не заселить форму с selected_customers свойства по причине это scope выпуск.

Вот моя служба:

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' } 
    }); 
}); 

Моя форма в шаблоне (используя тонкий)

div.center 
    form(ng-submit='submit()' ng-controller='CustomersEditController') 
     input(type='text' ng-model='selected_customer.first_name') 

Я использую 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'); 
    }]); 

Вот моя страница индекса рельсы , который начинает вечеринку: Его справедливо:

div(ng-app="customer_app") 
    h1 Customers 
    div(ng-view) 

Любая помощь или ссылка на документы, которые, возможно, я пропустил (или неправильно понял), было бы замечательно!

Answer 1

Основываясь на JavaScript, который вы опубликовали, ваш контроллер CustomersEditController. Но, когда вы переключаете URL-адреса с помощью $location.path, ваш $routeProvider загружает новый маршрут, создавая вместо этого CustomersController (как определено через $routeProvider).

По умолчанию $routeProvider изменяет маршруты для вас и создает экземпляр контроллера, старый контроллер уходит - поэтому вы теряете данные на $scope при изменении URL-адресов (новый контроллер получает свою собственную область).

Чтобы это исправить, вы можете загрузить пользователь при достижении контроллера нового:

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'); 
    }); 
}; 

Конечно, в том случае, когда идентификатор пользователя не является допустимым, вы должны отобразить ошибка или перенаправить обратно на предыдущий URL.

Другой вариант - использовать свойство resolve в вашей конфигурации маршрута. В основном, resolve позволяет вам определять данные, необходимые новому контроллеру, и вы можете обеспечить доступность указанных данных до перехода на новый маршрут и ввода данных в новый контроллер. Используя promise, вы также можете использовать асинхронно загруженные данные.

$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; 
};