如何在某个操作后刷新AngularJS指令

How to refresh AngularJS directive after certain action

本文关键字:刷新 AngularJS 指令 操作      更新时间:2023-09-26

我想在函数被触发后"刷新"(生成新值)指令。我当前的代码如下:

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(纯javascript)规则强制Angular播放时,问题就来了。Angular不知道也不关心on('whatever')事件,它只关心ng更改、ng点击等。对于Angular更新其值,它需要了解它应该在什么时候发生,(粗略地说)在摘要周期结束时。在执行完ctrl.int()之后添加$scope.digest()。