AngularJS 异步隔离指令不起作用

Question

我想将从数据库返回的对象发送到子指令。当我在同步模式下发送任何类型的数据时，它都有效。然而，当我做同样的事情但从远程服务器获取数据时 - 异步方法，指令被触发在结果出现之前。

这是从服务器获取数据的控制器：

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文件：

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

我认为当我使用 = 运算符时，这意味着它现在是双向绑定，指令将监视更改，然后根据请求后的数据获得功能服务器。

然而它不是那样工作的。

它应该如何工作以及我应该怎么做才能正常工作？

Answer 1

当呈现 <edit-employee 时，它将尝试让 employee 在此行上执行 console.log

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

但不幸的是，当时 employee 仍然未定义，因为它正在等待服务器的响应。为了更清楚地了解这一点，您可以启动一个 $watch 来观察 edit-employee 指令中的 employee，每当 HTTP 完成时，它都会将员工更新为最新值。

How should it work and what should I do, the standard way, to make thing working?

这真的取决于，我遇到过一次这个问题，我在 <edit-employee ng-if='employee' 上使用了 ng-if，这意味着 edit-employee 指令将在 employee 初始 (!= undefine).

另一种方法是观察 edit-employee 指令中的 employee 并检查 employee 是否有价值，然后继续业务逻辑

AngularJS 异步隔离指令不起作用

AngularJS Async isolated directive is not working

javascript

angularjs

angularjs-directive