所以我希望将我的插件库移动到Angular,尽可能地保持一致.我遇到的问题是在其孩子的任何指令运行之后获得指令运行.
只是为了给出一点清晰度,这里的目标是使我们的集成商(CSS / HTML只有团队成员)轻松地通过使用功能标记来为项目添加动态功能.目前他们通过data-features属性来做到这一点.例如,对于图像滑块,他们可能使用data-features =“imageSlider”属性标记UL,以使UL成为滑块.
沿着这些路线,我正在将图像滑块模块移动到角度.我希望我的集成商能够写下如下：
<ul image-slider>
<li slide>
My Slide 1
</li>
<li slide>
My Slide 2
</li>
<li slide>
My Slide 3
</li>
</ul>
我可以动态地将其转换为图像滑块.以上工作正常,但如果标记如下所示：
<ul image-slider>
<li slide ng-repeat="slide in data.slider.slides">
My Slide {{$index}}
</li>
</ul>
然后在图像滑块指令运行之前,ng-repeat没有完成,这意味着我无法访问所有的幻灯片来工作我的魔法.
有没有办法我可以告诉image-slider指令,等待其中的任何指令在触发之前完成？
我已经阅读了以下问题：
> Directive that run after ng-repeat
> Angularjs custom directive highlight text after ng repeat has run
> Running parent directives after children directives
这些问题似乎都没有答案,所以我想我会把一个更简洁的问题放在一起,希望找到一个答案.
解决方法
所以最简单的方法是在幻灯片指令和image-slider指令之间使用
directive to directive communication.这是你做的：
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',function($log) {
return {
require: "^imageSlider",link: function($scope,elem,attribs,ctrls ) {
ctrls.addSlide( $scope );
}
};
} ] );
这样,ImageSlider可以提供幻灯片界面进行通信.注意这个.functionName vs $scope.functionName的区别.前者是将方法暴露给其他指令的方法.
