AngularJs + TypeScript: - Как назначить значение переменной в текстовое поле

Question

Я взял два div один слева выравнивается, а второй справа. В обоих div у меня есть текстовое поле. Я дал ng-href, на котором i Я пытаюсь скопировать данные левого 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; 
    } 
} 

Я попробовал в другом, как предположил Дин Уорд тоже, но новая проблема возникает

Изменено Error2

! [Введите описание изображения здесь] [2 ]

Answer 1

Вы используете синтаксис controllerAs. В этом случае вы не должны использовать объем:

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

и вы должны указать ваши ng-click с custom префиксом:

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

нг-клик = "custom.ButtonCopy (custom.txtFirstName) «> Копировать Контактная информация

Пример фрагмента:

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; 
     } 
    }