Угловая область не сохраняющая ценность

Question

Друзья ..

Для моего понимания того, как работает маршрутизация в Угловом, я создал простое приложение. Это приложение имеет только две страницы: 1. На первой странице будут отображаться все строки таблицы сотрудников. При нажатии на определенную строку вторая страница отобразит форму с данными этого сотрудника.

список, который отображается на первой странице используется следующий код:

<table> 
    <tr ng-repeat="employee in employees"> 
     <td>{{employee.firstname}} - {{employee. address}}</td>   
     <td><span ng-click="getSingleEmployeeDetails(employee.id)">Edit</a></td> 
    </tr> 
</table> 

Я использую тот же контроллер для обоих этих страниц и этот контроллер выглядит следующим образом:

function EmployeeCtrl($scope,$http,Employee,$location,$routeParams) { 
    // Get all employee details 
    var data; 
    Employee.query().then(function(_data) { 
     $scope.employees = _data.data;    
    }); 

    // Get Single Employee Details 
    $scope.getSingleEmployeeDetails = function(id) { 
     $scope.employee = scope.employees[id]; 
     $location.path('/editemployee/' + id); 
    } 
} 

Однако проблема, с которой я сталкиваюсь, заключается в том, что когда код отправляется в/editemployee/1
по какой-то причине $ scope.employees теряет свои значения.

Другими словами, форма никогда не заполняется деталями сотрудника.

Что я здесь делаю неправильно?

Answer 1

Это связано с областью обзора. Сотрудники загружаются в EmployeeCtrl при его создании. Когда вы выполняете событие маршрутизации в getSingleEmployeeDetails(), это приводит к тому, что другой контроллер загружается с другой $ -ой областью. Область $, которая отделена от $ scope внутри EmployeeCtrl. Один простой способ - позволить EmployeeCtrl обрабатывать функциональность загрузки/отображения всех сотрудников и одного сотрудника без маршрутизации на новый контроллер. Преимуществом здесь является то, что он упрощает обмен информацией, и вам не нужно перезагружать информацию одного сотрудника, когда пользователь нажимает на одного сотрудника, потому что вы можете делиться этой информацией более легко. Согласитесь, вы не вернетесь к навигации по кнопкам, чтобы перемещаться между выборами отдельных сотрудников.

Другой вариант - позволить SingleEmployeeCtrl перезагружать информацию при ее навигации. Про - вы снова получаете доступ к кнопке, но con вы загружаете информацию дважды (один раз для загрузки полного списка и дважды для загрузки информации о сотрудниках). Это также позволяет пользователю закладок отдельных записей сотрудников, но кто больше закладок?

Answer 2

Другие уже объяснили, что при изменении маршрутов создается новый контроллер (и $ scope). Также обратите внимание, что $ scope.employees заселяется асинхронно, когда обещание будет разрешено. Вероятно, происходит то, что getSingleEmployeeDetails() вызывается до того, как обетование будет разрешено, поэтому массив employees пуст.

Чтобы решить эту проблему, я предлагаю другую архитектуру.

У вас есть два вида/страниц. Каждый вид в Angular обычно имеет свой собственный контроллер. Модели/данные обычно хранятся в службах, и API для извлечения и управления этими моделями/данными становится доступным/общедоступным службой. Контроллер просто склеивает все вместе: он вводит необходимые ему службы (службы), а затем ссылается только на те модели/данные, которые необходимы для соответствующего представления.

Итак, несмотря на то, что ваше приложение прост, я предлагаю вышеупомянутый подход: одна служба (в которой хранятся объекты сотрудника), два контроллера, два вида. В частности, поместите вызов query() в вашу службу (поэтому он будет вызываться один раз, когда создается служба) и хранить ваши данные в службе.API-интерфейс службы должен определять функции/методы, которые возвращают обещание, которое в конечном итоге будет содержать требуемые данные (список сотрудников или только один). Контроллеры должны использовать эти методы для получения ссылки на нужные данные.

См. Также Should services expose their asynchronicity? для примера того, как хранить данные в службе.