簡體   English   中英

某些操作后如何刷新AngularJS指令

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM