Как обновить директиву AngularJS после определенного действия

Question

Я хочу «обновить» (сгенерировать новые значения) директиву после срабатывания функции. Мой текущий код выглядит следующим образом:

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

Answer 1

Проблема возникает, когда вы пытаетесь заставить Угловое играть в соответствии с (чистый JavaScript) правил Jquery. Угловой не знает и не заботится о событии on('whatever'), и он заботится только о ng-change, ng-click и т. Д. Чтобы Angular смог обновить свои значения, он должен понять, когда это произойдет, что (грубо говоря) на конец цикла дайджеста. Добавьте $ scope.digest() после выполнения ctrl.init().