Question

我在ng-repeat完成后尝试在Typescript中制作Angular指令时遇到问题。

这就是我试图使指令工作的方式：

export interface ILightSliderInitDirectiveScope extends ng.IScope {
}
export class LightSliderInitDirective implements ng.IDirective {
    public static DirectiveName: string = "lightSliderInit";
    link = (scope: ILightSliderInitDirectiveScope, $element: any, attrs: ng.IAttributes) => {
        if (scope.$watch('$scope.$last'))
            scope.$emit('ngRepeatFinished');
    }
}

在控制器上我有这个方法：

_self.$scope.$on('ngRepeatFinished', function() {...});

在HTML：

<li ng-repeat="it in items" light-slider-init>...</li>

问题是该指令有效，但它在ng-repeat的每次迭代中都进入if条件。

我该如何解决这个问题？

Answer 1

scope.$watch为此侦听器返回注销函数，因此scope.$watch('whatever')始终是真实的。并且您不应将$scope添加到已监视的表达式，因为它是针对$scope对象进行评估的。
以下是您的代码应该是什么样的：

scope.$watch('$last', $last => {
  if ($last) scope.$emit('ngRepeatFinished');
})

Answer 2

我不建议使用射击和事件来执行此操作，因为如果您在页面上需要2个或更多光滑块，则会非常困难。

因为它位于ng-repeat中，所以您的链接函数实际上将针对转发器中的每个实例运行。因此，不应$watch $last的值，而应该只在转发器的最后一项上执行代码。

基于https://stackoverflow.com/a/30257914/1299394的代码：

export class LightSliderInitDirective implements ng.IDirective {
    restrict: 'A',
    link: function(scope: ILightSliderInitDirectiveScope, element: JQuery, attrs) {
        if (scope.$last) {
            // This is the last item in the repeater
            // Instead of firing an event, just initialize the light gallery right here.
            element.parent().lightGallery();
        }
    }
};

ng-repeat后的Typescript中的Angular指令

2 个答案: