javascript - Angular 指令未正确接收对象

Question

我定义了一个 person 对象(从后端加载)，如下所示:

{
    "PersonId":"19894711-2eb9-4edf-92c6-85de2b33d1bb",
    "Firstname":"Jacky",
    "Lastname":"Chan",
    "DateOfBirth":"1963-09-18T00:00:00",
    "CreateDate":"2015-12-11T09:15:49.403",
    "ModifyDate":"2015-12-11T09:15:49.403"
}

使用以下 HTML 代码可以正确显示:

<table>
    <tr>
        <td>Firstname</td>
        <td>
            <input type="text" ng-model="person.Firstname" class="form-control"/>
        </td>
    </tr>
    <tr>
        <td>Lastname</td>
        <td>
            <input type="text" ng-model="person.Lastname" class="form-control"/>
        </td>
    </tr>
</table>

但是，如果我将同一个对象传递给指令:

<address-displayer-directive person="person"></address-displayer-directive>

这不起作用。

这是指令的代码:

myApp.directive("addressDisplayerDirective", [
    "addressService",
    function (
        addressService) {
        return {
            scope: {
                person: "="
            },
            restrict: "E",
            templateUrl: "/Templates/Directives/addressDisplayerDirective.html",
            controller: [
                "$scope",
                function ($scope) {
                    console.log($scope.person);

                    $scope.addresses = addressService.GetForPerson($scope.person.Id);
                }],
            link: function ($scope, $elem, $attrs) {
                console.log($attrs.person);
            }
        };
    }]);

链接 block 处的 console.log 显示“person”(作为字符串，而不是对象)。

Controller block 上的console.log显示未定义。

我尝试用 Plunk 来模拟它，但是它可以工作。

有什么想法吗？

Answer 1

您仅在最初时执行日志(因此变得未定义)。您需要观察对象何时填充，然后执行服务调用。

    controller: [
            "$scope",
            function ($scope) {
                console.log($scope.person);
                $scope.$watch(function(){
                    return $scope.person;
                }, function(){
                    if($scope.person && $scope.person.PersonId){
                        $scope.addresses = addressService.GetForPerson($scope.person.Id);
                    }
                });                    
            }],