javascript - AngularJS 异步隔离指令不起作用

Question

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

这是从服务器获取数据的 Controller :

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

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

但它不是那样工作的。

它应该如何工作以及我应该做什么，以标准方式使它工作？

Answer 1

当 <edit-employee被渲染时它将尝试获取 employee做一个console.log在这条线上

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

但不幸的是，那个时候，employee仍然未定义，因为它正在等待服务器的响应。为了更清楚地了解这一点，您可以发起$watch。观看employee里面edit-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) .

另一种方式是观看 employee里面edit-employee指令并检查是否 employee有值(value)再继续业务逻辑