在ng-src后运行指令代码

我有一个在其模板中使用ng-src的视频播放器指令。如何在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}}之前执行模板进行了评估。

后链接的要点在于它是在儿童后链接之后执行的，与前链接相反。那么为什么它最后没有执行？它在预链接函数之后立即执行，为什么它们甚至是单独的函数？

来源

2015-10-06 Tahsis Claus

'link：function'，'link：{pre：function，post：function}'，所有函数在子指令之前进行评估。 –

视频标签本身引发了几个事件，可以角度看这些？ – dandavis

你可以在你的指令中有$observe，它的工作方式与$watch的工作方式相同，不同之处在于它评估的插值表达式为{{}}。

Inside $observe你可以看到ng-src是否有值唯一的调用指令方法。否则等待。

来源

2015-10-06 19:29:01

该属性不在指令的根元素上，也不一定需要更新。 –

@TahsisClaus一旦你有价值，你可以注销这个'$ observe'。你可以在你的问题中添加你的html吗？ –

@TahsisClaus你可以创建一个单独的指令，将它放在'img'元素上，然后这个指令将具有'require'属性，这将是父指令..在ng-src URL填充后，子指令将会调用父指令 –

有一对夫妇的食谱中link的时刻来执行代码时指令DOM“是存在的”。一种是使用零延迟超时

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

如果您在渲染DOM或插值后，通常更可取。这不是一个选项，因为使用了templateUrl并且异步加载了指令模板，并且在链接阶段模板不可用。

另一个配方是使用示波器观察器/属性观察器（如果您不关心数据绑定，则为一次性）。

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

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

此行为表明它可以用于什么。在父母preLink有些事情可以完成，必须先于子女preLink或后者可以受益，你很少会发现有用的简单指令。父母postLink最后执行，这是'好的，我的孩子们已经被编译和链接了，我们终于做了一些事情'。

来源

2015-10-06 20:27:27 estus

我不想异步执行它，因为在Angular中尽可能避免它。后链接函数的要点是在子指令链接后执行，至少在你使用模板而不是你提到的templateUrl时，他们不这样做。 –

如果只是真的，你可以拿回你的钱:)你的困惑来自误解什么是链接。从[手册]（https://docs.angularjs.org/guide/compiler#an-example-of-compile-versus-link-）：'链接的意思是在DOM上设置监听器并设置$ watch保持两者同步的范围。 ”。这并不意味着范围绑定已经在postLink中插入。因为他们没有。它们在postLink之后插入，当摘要循环命中并且稳定时。这就是$ timeout（...）的目的，代码将在下一个摘要之后执行。 – estus

对于在其模板中有ng-repeat的指令，在ng-repeat更新之后，为了触发$ watchFn，我应该在哪里放置$ watch到ng-repeat目标上？ –

在ng-src后运行指令代码

回答

相关问题