Angular 指令未正确接收对象答案

【问题标题】：Object not received correctly by Angular directiveAngular 指令未正确接收对象
【发布时间】：2015-12-18 12:59:51
【问题描述】：

我定义了一个人对象（从后端加载），如下所示：

{
    "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);
            }
        };
    }]);

链接块中的console.log 显示"person"（作为字符串，而不是对象）。

控制器块上的console.log，显示undefined。

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

有什么想法吗？

【问题讨论】：

这只是您在关闭 HTML 标记中的person="person" 的错字吗？如果是这样，这绝对是错误的
是的，复制粘贴错误试图设置我的问题。事实并非如此......

标签： javascript jquery html angularjs asp.net-web-api2

【解决方案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);
                    }
                });                    
            }],

【讨论】：

行得通！传递给 (person) 的对象是一个 promise 对象，异步加载，所以有意义！

【解决方案2】：

我可能是错的，但是这样做，您只需将字符串“person”传递给您的指令。

试试这个：

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

【讨论】：

如果person: '@' 将在指令的范围声明中定义，则需要这样做。（允许表达式评估）