javascript - Angular $interval 不是函数问题

标签 javascript angularjs directive clock

我知道您可能会将其标记为重复,但没有一个同级主题不能解决我的问题,所以这是我的简单日期倒计时指令:

class Clock {
    constructor() {
        this.restrict = 'AC';
        this.replace = true;
        this.template = require('./templates/clock.tpl.html');
        this.scope = {};
    }
    link(scope, elem, attrs, $interval) {
        let end = new Date('05/05/2017 9:00 AM');

        let _second = 1000;
        let _minute = _second * 60;
        let _hour = _minute * 60;
        let _day = _hour * 24;

        scope.showRemaining = () => {
            let now = new Date();
            let distance = end - now;
            let days = Math.floor(distance / _day);
            let hours = Math.floor((distance % _day) / _hour);
            let minutes = Math.floor((distance % _hour) / _minute);
            let seconds = Math.floor((distance % _minute) / _second);

            scope.days = days;
            scope.hours = hours;
            scope.minutes = minutes;
            scope.seconds = seconds;
        }

        $interval(showRemaining, 1000;)
    }
}

// create factory function to handle DI
function factory() {
    "ngInject";

    return new Clock();
}

export default factory;

我一直在寻找这个问题的原因,我到处都得到信息,间隔函数必须作为一个没有参数或任何其他插件的正常函数传递。但我仍然有同样的错误,即:

类型错误:$interval 不是函数

有人可以帮忙吗?

最佳答案

您必须在构造函数中注入(inject)依赖项,而不是在 link 函数中:

constructor($interval) {
    // ..
    this.$interval = $interval;
}
link(scope, elem, attrs) {
    // ..
    this.$interval(showRemaining, 1000;)
}

关于javascript - Angular $interval 不是函数问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42488017/

相关文章:

javascript - 具有整数比较的 AngularJS 过滤器

javascript - 检测 iframe 和元素何时完全渲染,而不仅仅是加载 html

javascript - 重复激活点击事件时动画延迟突然增加。持续增加

javascript - 让两个自定义指令在 AngularJS 中相互交互

javascript - 将参数传递给 ng-show 中调用的函数

angularjs - 将对象作为属性传递给动态编译指令

javascript - 表中自定义 html 标签的 Angular 指令

javascript - 实现 JavaScript 褪色图像鼠标悬停和鼠标移出效果的最佳方法是什么?

javascript - try catch 不捕获无效日期