在ng-src之后运行指令代码

时间:2015-10-06 19:21:45

标签: javascript angularjs

我有一个视频播放器指令,在其模板中使用ng-src。如何在评估ng-src后运行指令代码,以便实际加载视频?

这是指令代码:

return {
        restrict: 'A',
        replace: false,
        transclude: false,
        scope: true,

        templateUrl: "/modules/didyouknow/views/slideshow-frame.directive.client.view.html",

        link: {
            pre: function() {
                console.log('a');
            },
            post: function(scope, element, attrs) {
                /**
                 * scope.frame - frame information
                 */
                scope.frame = scope[attrs.slideshowFrame];
            }
        }
    };

两个链接函数在模板中评估{{expr}}之前执行。

帖子链接的全部意义在于它是在子链接之后执行的,与前链接的顺序相反。那为什么不执行最后一次呢?它在prelink函数之后立即执行,那为什么它们甚至是单独的函数?

2 个答案:

答案 0 :(得分:1)

您可以在指令中使用$observe,它与$watch的工作方式相同,但区别在于它会计算{{}}插值表达式。

$observe内,您可以看到ng-src是否有值唯一调用指令方法。否则等。

link: function(scope, element, attrs){
   attrs.$observe('ngSrc', function(newVal, oldVal){
       if(newValue){
           //call desired code when `ng-src` have value
       }
   });
}

答案 1 :(得分:0)

当指令DOM'在那里时,有link执行代码的一些方法。一个是使用零延迟超时

$timeout(function () {
  ...
});

通常情况下,如果您在渲染DOM或插值之后再进行操作。这不是一个选项,因为使用templateUrl并且异步加载指令模板,并且在链接阶段模板不可用。

另一个方法是使用范围观察者/属性观察者(如果你不关心数据绑定,则一次性)。

var unobserveNgSrc = attrs.$observe('ngSrc', function (ngSrc, oldNgSrc) {
  if (!ngSrc) return;
  unobserveNgSrc();
  ...
})
  

它在预链接功能之后立即执行,为什么它们甚至是单独的功能?

此行为表明它可以用于什么。在父preLink中,可以在子preLink之前完成一些事情,或者后者可以从中受益,这对于简单的指令很少有用。父母postLink执行最后,这是一个很好的时刻,好吧,我的所有孩子都已经编译和关联,让我们最后做点什么。