Angular 指令未正确接收对象

Question

我定义了一个人对象（从后端加载），它看起来像这样：

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

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

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

我尝试用 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);
                    }
                });                    
            }],

Answer 2

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

试试这个：

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

Angular 指令未正确接收对象

Object not received correctly by Angular directive

html

javascript

jquery

angularjs

asp.net-web-api2