NG重复后运行指令 [英] Run Directive After NG-Repeat
问题描述
为了清楚一点，这里的目标是使我们的集成人员（仅限CSS / HTML团队成员）能够轻松地为项目添加动态功能，只需使用功能标记它即可。目前他们通过 data-features 属性完成此操作。例如，对于一个图像滑块，他们可能会使用 data-features =imageSlider属性标记UL，以使UL成为滑块。
沿着这些线条，我正在将图像滑块模块移动到角度。我希望我的集成商能够写出如下内容：
< ul image-slider>
< li幻灯片>
我的幻灯片1
< / li>
< li幻灯片>
我的幻灯片2
< / li>
< li幻灯片>
我的幻灯片3
< / li>
< / ul>
我可以将它变成一个动态的图像滑块。如果标记看起来像这样：
< ul image-slider>
< li slide ng-repeat =slide in data.slider.slides>
我的幻灯片{{$ index}}
< / li>
< / ul>
然后 ng-repeat 不会在 image-slider 指令运行之前完成，这意味着我无法访问所有幻灯片来使用我的魔法。
有没有一种方法可以告诉 image-slider 指令在发射前等待指令内部的任何指令完成？
我已阅读以下问题：
没有ese似乎对这个问题有了一个答案，所以我想我会把更简洁的问题放在一起，希望能找到答案。 解决方案
因此，最简单的方法是使用指令进行指导性沟通之间的幻灯片指令和图像滑块指令。这是你做的：
$ b $ pre $ app.directive（imageSlider，['$ log'，function（$ log）{
return {
scope：{
}，
controller：function（$ scope）{
$ scope.slides = [];
//这是一个不会暴露给其他指令的常规控制器方法
$ scope.startGallery = function（）{
};
// this方法将暴露给需要imageSlider
的指令this.addSlide = function（slide）{
$ scope.slides.push（slide）;
}
}
};
}]）;
$ b app.directive（'slide'，['$ log'，function（$ log）{
return {
require：^ imageSlider，
link：function（$ scope，elem，attribs，ctrls）{
ctrls.addSlide（$ scope）;
}
};
}]）;
通过这种方式，imageSlider可以提供滑动界面来进行通信。注意this.functionName与$ scope.functionName的区别。前者是将方法暴露给其他指令的一种方式。
So I am looking to move my library of plugins over to Angular wherever possible just to keep things consistent. The problem I am running into is getting directives to run after after any directives on its children have run.
Just to give a little bit of clarity, the goal here is to make it easy for our integrators (CSS/HTML only team members) to add dynamic functionality to items simply by tagging it with a feature. Currently they do this via a data-features attribute. For instance, for an image slider they might tag a UL with a data-features="imageSlider" attribute to make that UL a slider.
Along those lines, I am working on moving that image slider module over to angular. I want my integrators to be able to write something like:
<ul image-slider>
<li slide>
My Slide 1
</li>
<li slide>
My Slide 2
</li>
<li slide>
My Slide 3
</li>
</ul>
And I can turn that into an image slider dynamically. The above works fine, however if the markup looks like this:
<ul image-slider>
<li slide ng-repeat="slide in data.slider.slides">
My Slide {{$index}}
</li>
</ul>
Then the ng-repeat doesn't finish before the image-slider directive runs, which means I do not have access to all of the slides to work my magic.
Is there a way I can tell the image-slider directive to wait for any directives inside of it to finish before firing?
I have read the following questions already:
- Directive that run after ng-repeat
- Angularjs custom directive highlight text after ng repeat has run
- Running parent directives after children directives
None of these seem to have an answer to this problem so I figured I would put together a much more succinct question in the hopes of finding an answer.
So the easiest way to do this is to use directive to directive communication between slide directive and the image-slider directive. Here is what you do:
app.directive("imageSlider", [ '$log', function($log) {
return {
scope: {
},
controller: function($scope) {
$scope.slides = [];
// this is a normal controller method that is NOT exposed to other directives
$scope.startGallery = function() {
};
// this method will be exposed to directives that require imageSlider
this.addSlide = function(slide) {
$scope.slides.push( slide );
}
}
};
} ]);
app.directive('slide', [ '$log', function($log) {
return {
require: "^imageSlider",
link: function($scope, elem, attribs, ctrls ) {
ctrls.addSlide( $scope );
}
};
} ] );
This way imageSlider can provide slide an interface to communicate through. Notice the difference in this.functionName vs $scope.functionName. The former being a way to expose methods to other directives.
这篇关于NG重复后运行指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
