Question

我有一个视频播放器指令，在其模板中使用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函数之后立即执行，那为什么它们甚至是单独的函数？

Answer 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
       }
   });
}

Answer 2

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

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

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

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

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

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

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

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

2 个答案: