AngularJs+TypeScript：- 如何将变量的值分配给文本字段

Question

我已经采取了两个 div 一个左对齐，第二个是右对齐。在两个 div 中我都有一个文本框。我给了一个 ng-href，我试图将左 div 的数据复制到右 div 但它不是那样走。它什么也没做。 这是我的 HTML 代码：-

<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom" data-ng-init="getFormData();data();">
    <div id="div1" align="left">
    <tr>
     <td style="width: 200px">First Name:</td>
    <td>
    <asp:TextBox ID="txtFirstName" TabIndex="1" runat="server" CssClass="NormalTextBox"Width="160px" Height="10px" Name="txtFirstName" ng-model="custom.txtFirstName"></asp:TextBox>
    </td>
    </tr>
    </div>

<div id="Div2" align="Right">
<tr>
<td colspan="2" width="100">
<a ng-href="" Width="147px" style="cursor:pointer;" TabIndex="12" 
ng-click="ButtonCopy(custom.txtFirstName)">Copy Contact Info</a>
</td>
</tr>
 <tr>
<td style="width: 200px">First Name:</td>
<td>
<asp:TextBox ID="txtFirstNameBilling" TabIndex="12" runat="server" CssClass="NormalTextBox"Width="160px" Height="10px" ng-model="custom.txtFirstNameBilling"></asp:TextBox>
</td>
</tr>
</div>

赋值：-

    /// <reference path="../interface/interface.ts" />
    /// <reference path="../../scripts/typings/jquery/jquery.d.ts" />
    /// <reference path="../../scripts/typings/angularjs/angular.d.ts" />

    module CustomerNew.controllers {
        export class CreateCustomerCtrl {
            static $inject = ['$scope', '$http', '$templateCache'];
            debugger;
            constructor(protected $scope: ICustomerScope,
                protected $http: ng.IHttpService,
                protected $templateCache: ng.ITemplateCacheService) {
                $scope.ButtonCopy = this.ButtonCopy;
            }
     public ButtonCopy = (FirstName) => {
this.$scope.txtFirstNameBilling = FirstName;
            }
            //end
        }
        var customerapp = angular.module("CustomerNew", []);
        customerapp.controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    }

我的界面

module CustomerNew {
    export interface ICustomerScope extends ng.IScope {
        ButtonCopy: (FirstName) => void;
    }
}

我也尝试过 Dean Ward 建议的不同方式，但出现了新问题

更新错误2

![在此处输入图片描述][2]

Answer 1

您正在使用 controllerAs 语法。在这种情况下，您不应该使用范围：

public ButtonCopy = (FirstName) => {
    this.txtFirstNameBilling = FirstName;
}

你应该用custom前缀指定你的ng-click：

<a ng-href="" Width="147px" style="cursor:pointer;" TabIndex="12" 

ng-click="custom.ButtonCopy(custom.txtFirstName)">复制联系信息

示例 sn-p：

var customerapp = angular.module("CustomerNew", []);
customerapp.controller('CreateCustomerCtrl', [
  "$scope", "$http", "$templateCache", 
  function($scope, $http, $templateCache) {
    this.ButtonCopy = function(FirstName) {
      console.log("Boom");
      this.txtFirstNameBilling = FirstName;
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom">
    <div id="div1" align="left">
    <tr>
     <td style="width: 200px">First Name:</td>
    <td>
    <input ng-model="custom.txtFirstName" />
    </td>
    </tr>
    </div>
<div id="Div2" align="Right">
<tr>
<td colspan="2" width="100">
  <button ng-click="custom.ButtonCopy(custom.txtFirstName)">Copy Contact Info</button>
</td>
</tr>
 <tr>
<td style="width: 200px">First Name:</td>
<td>
<input ng-model="custom.txtFirstNameBilling">
</td>
</tr>
</div>

您随后的 TypeScript 问题与用于控制器的类上的未定义字段有关。在这种情况下，如下更改类定义将修复它：

export class CreateCustomerCtrl {
    static $inject = ['$http', '$templateCache'];
        constructor(
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
        }

        public txtFirstNameBilling: string;
        public txtFirstName: string;
        public ButtonCopy = (FirstName) => {
            this.txtFirstNameBilling = FirstName;
        }
    }