[英]How to refresh AngularJS directive after certain action
我想在函數觸發后“刷新”(生成新值)指令。 我當前的代碼如下所示:
class FicheController {
constructor() {
this.words = `[
{ "en" : "cup", "pl" : "kubek" },
{ "en" : "desk", "pl" : "biurko" },
{ "en" : "chair", "pl" : "krzesło" },
{ "en" : "board", "pl" : "tablica" },
{ "en" : "sky", "pl" : "niebo" }
]`;
this.parsedWords = JSON.parse(this.words);
}
init(lang) {
// set lang
this.setCurrentLang(lang);
let totalWords = this.getNoWords(),
randomNumber = this.getRandomNumber(totalWords),
translation = this.getCurrentTrans(),
randomWord = this.getWords()[randomNumber][lang],
currentTask = this.getWords()[randomNumber][translation];
// set current word
this.setCurrentWord(randomWord);
// set current task
this.setCurrentTask(currentTask);
}
reinit() {
let lang = this.getCurrentLang();
this.init(lang);
}
...
app.directive('watchForWord', () => {
return {
controller: FicheController,
link(scope, element, attrs, ctrl) {
element.on('keyup', () => {
let currentVal = element[0].value,
currentTrans = ctrl.getCurrentTask(),
check = ctrl.diffWords(currentTrans, currentVal);
if(check === true) {
element.addClass('text-success');
ctrl.reinit();
} else {
element.removeClass('text-success');
}
});
}
};
});
的HTML
<div class="container-small">
<h2 data-random-fiche="en" class="text-huge text-primary align-center"></h2>
<p class="align-center text-grey ">to po polsku</p>
<div class="input full-width">
<input type="text" class="text-center" data-watch-for-word>
</div>
</div>
如您所見,我嘗試運行reinit()
但它無法滿足我的需求。 我能做什么?
您可以在CodePen上看到它: http ://codepen.io/tomekbuszewski/pen/MKyGBg
當您嘗試根據Jquery(pure javascript)規則強制Angular播放時,就會出現問題。 Angular不知道也不在乎on('whatever')
事件,它只關心ng-change,ng-click等。對於Angular更新其值,它需要了解何時應該發生,即(大致而言)在摘要周期結束時。 完成ctrl.init()之后,添加$ scope.digest()。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.