Question

UPDATE：

我想我找到了一个解决方案，并且我已经更新了以下代码以反映最新的变化。不过，我想知道这个解决方案是否正确有效。

我是AngularJS的新手，我正在尝试做一些看起来很简单的事情，但我无法让它发挥作用。

我有以下数据模型（伪代码）：

UserDetails:
    UserAddress: Address
    UserBillingInfo: BillingInfo

Address:
    Street: string
    City: string

BillingInfo:
    CreditCardNumber: string
    CardHolderAddress: Address

如您所见，我在不同级别使用了两次公共类Address。

我还有一个HTML代码段来表示每个类（使用指令），完全模仿结构。

事情是，我无法正确绑定。

我有一个控制器，UserDetailsController我绑定到顶层。我想将属性UserAddress绑定到address指令，将UserBillingInfo属性绑定到用户详细信息指令的billing info指令。在billing指令中，我想将CardHolderAddress属性绑定到address指令的相关实例。

我所做的一切似乎都无法发挥作用。

源代码

main.html中

<userdetails ng-controller="UserDetailsController as ud"></userdetails>

userdetails.html

<addressinput ng-controller="ud.UserAddress as addr"></addressinput>
<billinginfo ng-controller="ud.UserBillingInfo as bill"></billinginfo>

billinginfo.html

<input ng-model="bill.CreditCardNumber" />
<addressinput ng-controller="bill.CardHolderAddress as addr"></addressinput>

address.html

<input ng-model="addr.City" />
<input ng-model="addr.Street" />

directives.ts

module My.Directives {
    'use strict';
    export function addressDirective(): ng.IDirective {
        return {
            restrict: 'E',
            templateUrl: '/addressinput.html',
        };
    };
    export function billingDirective(): ng.IDirective {
        return {
            restrict: 'E',
            templateUrl: '/billinginfo.html',
        };
    };
    export function userdetailsDirective(): ng.IDirective {
        return {
            restrict: 'E',
            templateUrl: '/userdetails.html',
        };
    };
}

models.ts

module My.Models {
    'use strict';
    export class Address {
        public City: string;
        public Street: string;
    }

    export class BillingInfo {
        public CreditCardNumber: string;
        public cardHolderAddress: My.Models.Address;

        constructor() {
            this.cardHolderAddress= new My.Models.Address ();
        }

        public CardHolderAddress = function() { return this.CardHolderAddress; }.bind(this);
    }
}

controller.ts

module My.Controllers {
    'use strict';
    export class UserDetailsController {
        private userAddress: My.Models.Address;
        private userBillingInfo: My.Models.BillingInfo;

        constructor() {
            this.userAddress= new My.Models.Address ();
            this.userBillingInfo= new My.Models.BillingInfo ();
        }

       public UserAddress = function() { return this.userAddress; }.bind(this);
       public UserBillingInfo= function() { return this.userBillingInfo; }.bind(this);
    }
}

板井。

AngularJS将复杂数据模型绑定到等效的UI