Асинхронная изолированная директива AngularJS не работает - PullRequest
Новая
       5

Асинхронная изолированная директива AngularJS не работает

0 голосов
/ 01 ноября 2018

Я хочу отправить объект, возвращаемый из БД, в дочернюю директиву. Когда я отправляю любые данные в режиме синхронизации, это работает. Однако, когда я делаю то же самое, но извлекаю данные с удаленного сервера - асинхронный метод, директива срабатывает до , результаты приходят.

Это контроллер, который извлек данные с сервера: 

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/root/cardboards/employees/:_employee", {
        templateUrl: "screens/root/cardboards/employees-detail/employees-detail.html"
    });
    // $locationProvider.html5Mode(true);
});

app.controller("employees-detail", ($rootScope, $scope, $location, $routeParams, Http, Cast) => {
    Http.GET({
        resource: `employees/${$scope._employee}`
    }, (err, response) => {
        if (err) return Cast.error(err);
        $scope.employee = response.data; // employee's object
        $scope.$apply();
    });
});

Это элемент директивы в HTML: 

<edit-employee employee="employee"></edit-employee>

И это директива edit-employee js file: 

app.directive("editEmployee", ($rootScope, Http, Cast) => {
    return {
        templateUrl: "/screens/root/cardboards/employees-detail/components/edit-employee/edit-employee.html",
        scope: {
            employee: "="
        },
        link: function($scope, element, attrs) {
            console.log($scope.employee); // undefined
        }
    }
});

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

Однако это не работает так.

Как это должно работать и что я должен делать стандартным способом, чтобы все заработало?

1 Ответ

0 голосов
/ 01 ноября 2018

Когда <edit-employee рендерится, он попытается заставить employee сделать console.log в этой строке 

link: function($scope, element, attrs) {
  console.log($scope.employee); // undefined
}

Но, к сожалению, в то время employee все еще не определен, так как ожидает ответа от сервера. Чтобы лучше понять это, вы можете инициировать $watch для просмотра директивы employee внутри edit-employee, и всякий раз, когда HTTP завершается, он обновляет сотрудника до новейшего значения.

Как это должно работать и что я должен делать стандартным способом, чтобы все заработало?

Это действительно зависит, однажды я столкнулся с этой проблемой, и я использовал ng-if на <edit-employee ng-if='employee', что означает, что директива edit-employee будет отображаться после того, как employee является начальным (!= undefine).

Другой способ - посмотреть директиву employee inside edit-employee и проверить, имеет ли значение employee, затем продолжить бизнес-логику

...