Javascript 角度自定义指令作用域未按预期更新

在我的TypeScript应用程序的页面上使用了几个指令，每个指令都有自己的控制器来管理自己的作用域。在这个奇怪的bug出现之前，一切都很顺利

我有一个

键盘

指令用于

支付

指令，该指令由我的

订单

控制器调用。为了简单起见，我将尽量减少代码示例

My

payment

指令有一个控制器，该控制器有一个构造函数，该构造函数具有：

$scope.vm = this;

我经常使用这种模式。My

payment

指令还有一个函数

keypadOnChange（）

，可从

keypad

指令调用该函数

// In the payment directive:
public keypadOnChange(keypadDirective: IKeypadDirectiveController): void {

    console.log("keypad is changed");
    console.log(keypadDirective.selection);

    this.manualTenderInputValue = Number(keypadDirective.selectionToString());

    console.log(this.manualTenderInputValue);

}

这里值得注意的是，

控制台

在正确的时间显示了我所期望的一切

我的

付款

指令模板包含：

<div ng-show="vm.keypadIsVisible" class="square_keypad">

    <div class="white"
         keypad
         onchange="vm.keypadOnChange"></div>

    </div>

<div class="item manual-tender-input-field item-white item-small-padding"
        ng-click="vm.toggleKeypadVisibility()">

    {{ vm.manualTenderInputValue }}

</div>

现在，回到我的

payment

，它有一个模板，上面有一行如下所示：

<div class="white"
     keypad
     onchange="vm.keypadOnChange"></div>

而

支付

指令控制器具有原始post中包含的

键盘更改

功能。我插入了一个

console.log（this）

，发现在这个上下文中，

this

指的是

键盘

指令控制器的实例。这就是问题所在

但是。。。我该如何解决这个问题？（没有双关语）

如何使其在

支付

控制器上调用

keypadOnChange

时仍然具有该上下文的权限（因此可以更新范围）？

---

最后一点注意，我在别处使用了这个

键盘

指令，没有遇到这个问题。

解决我问题的方法是确保我可以维护

支付

指令控制器的

这个

上下文

---

我的

付款

控制器构造函数最终包括：

this.keypadChange = this.onKeypadChange.bind(this);

而

onKeypadChange（）

保持不变：

public keypadOnChange(keypadDirective: IKeypadDirectiveController): void {

    // is now referring to the instance of the controller, NOT the keypad directive:
    console.log(this);
    this.manualTenderInputValue = Number(keypadDirective.selectionToString());

 }

最后，调用

键盘

指令的模板现在如下所示：

<div class="white" keypad onchange="vm.keypadChange"></div>

---

---

根据评论和建议，我可能会更改一些属性名称以避免混淆，但此解决方案回答了我原来的问题。

我不确定。但请尝试调用“$scope.$apply（）；”更新指令中的manualTenderInputValue值后。onchange是什么？这是什么样的装订？你是如何触发这个功能的？你能试着隔离问题并在演示中复制它吗？你不应该使用ng change而不是onchange吗？你正在做很多Angular准备为你处理的工作<代码>$scope.vm=此应该是指令中的一个隔离作用域（否则当两个指令试图共享控制器时，会出现作用域冲突问题）。使用

ng change

而不是

$watch

处理onchange处理程序。你能用小提琴重现这个吗？此外，MCVE将使您更容易找到问题的解决方案。

<div class="white" keypad onchange="vm.keypadChange"></div>