如何在某个操作后刷新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(纯javascript)规则强制Angular播放时,问题就来了。Angular不知道也不关心on('whatever')
事件,它只关心ng更改、ng点击等。对于Angular更新其值,它需要了解它应该在什么时候发生,(粗略地说)在摘要周期结束时。在执行完ctrl.int()之后添加$scope.digest()。
相关文章:
- 如何刷新AngularJs剑道网格
- 我怎样才能告诉AngularJS“刷新”
- AngularJS:点击选项卡刷新视图中的数据
- AngularJS-状态更改时停止自动刷新页面
- 使用angularJs中的数据库数据源刷新下拉列表
- 如何刷新吴重复与AngularJs
- AngularJS:当过滤值发生变化时刷新DOM
- AngularJS部分模板双向绑定&刷新困境
- angularjs在操作后没有刷新客户端
- 信息窗口未刷新:AngularJS和谷歌地图
- 我必须刷新AngularJS页面才能看到我的更改
- 在ng-repeat中访问和刷新AngularJS ng-repeat
- 如何在不刷新 angularjs 的情况下返回上一页
- 刷新AngularJS中的控制器
- 如何在某个操作后刷新AngularJS指令
- 刷新AngularJS中最初传递到modalInstrance的数据
- 刷新AngularJS中服务器生成的模板
- 如何:刷新AngularJS路由
- 已成功从数据库中删除数据,但未刷新AngularJS中的当前页面
- Cookie不动态刷新-AngularJS