I need to pass an object retrieved from the database to a child directive. Sending data synchronously works fine, but when I fetch the data asynchronously from a remote server, the directive is triggered before the results are received.
Here is the controller that retrieves data from the server:
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();
});
});
This is the HTML element for the directive:
<edit-employee employee="employee"></edit-employee>
And here is the js file for the edit-employee directive:
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);
}
}
});
I assumed that using the = operator would enable two-way binding and the directive would update based on changes in the data fetched after the server request. However, this is not the case.
How should it actually work and what steps should be taken to ensure proper functionality?