Angular自定义指令范围未按预期更新

Question

我在TypeScript应用程序的页面上使用了一些指令，每个指令都有自己的控制器来管理自己的范围。 一切都很顺利，直到这个奇怪的错误。

我在payment指令中使用了一个keypad指令，该指令由我的order控制器调用。 为简单起见，我将保留我的代码示例。

我的payment指令有一个控制器，它有一个构造函数，它具有：

$scope.vm = this;

我经常使用这种模式。 我的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);

}

值得注意的是， console会在恰当的时间显示我期望的所有内容。

我的payment指令模板包含：

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

同样值得注意的是，所有函数和行为都按预期工作 - 包括vm.keypadIsVisible ，它以与vm.manualTenderInputValue类似的方式vm.manualTenderInputValue 。

问题是vm.manualTenderInputValue没有得到更新。 它显示在页面加载相应的价值，我可以console.log()它的价值时，它的变化，它是正确的，但我不能让{{ }}更新。

对我在这里缺少什么的想法？

---

更新

我的keypad指令处理更改事件，因此它可以告诉任何人听取更改，他们可以随心所欲地处理数据。 它看起来像这样（和扰流板：这里存在问题......）

我的键盘指令有一个控制器，有这些值得注意的线：

// a public variable:
public onChange: any = null;

// in the constructor:
$scope.$watch("onchange", (v) => { this.onChange = v; });

// in a function invoked by ng-click:
public selectNumber(digit: string, domId?: string): void {
    // ... some other stuff not relevant ...
    this.triggerOnChange();
}

// the triggerOnChange in the keypad directive controller:
public triggerOnChange(): void {
    if (this.onChange) {
        this.onChange(this);
    }
}

现在，回到我的payment ，其中有一个模板有一行看起来像：

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

并且payment指令控制器具有包含在原始帖子中的keypadOnChange功能。 我扔了一个console.log(this)现在那个上下文中， this是指keypad指令控制器的实例。 这就是问题所在！

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

如何让这个当keypadOnChange是在调用payment控制器，它仍然有正确的this方面（因此可以更新范围）？

最后一点，我在其他地方使用这个keypad指令并没有遇到这个问题。

Answer 1

什么解决了我的问题是确保我可以维护payment指令控制器的this上下文。

---

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

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());

 }

最后，调用keypad指令的模板现在看起来像：

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

---

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