Question

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

我在keypad指令中使用了payment指令，该指令由我的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没有得到更新。它会在页面加载时显示相应的值，并且在更改时可以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指令控制器的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>指令的模板现在看起来像：

{{1}}

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

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

更新

1 个答案: