AngularJS和jQuery插件后呈现 [英] AngularJS and jQuery plugin after render
问题描述
我建立一个滑块，而我使用的NG-重复指令来迭代（REST式）的服务在滑块来创建幻灯片。
我已经包裹在一个自定义的指令滑块来初始化它时，它的完成（即在链接功能）。
VAR刷卡= angular.module（'NG-刷卡'，['qbusService']）
.directive（'刷卡'，函数（）{ 返回{
链接：功能（范围，元素，ATTRS）{
$（元件）.swiper（{}）;
}
};}）;
然而滑块不正确初始化，我失去的东西吗？
HTML
＆LT; DIV CLASS =刷卡容器刷卡＆GT;
＆LT; DIV CLASS =刷卡-包装＆GT; ＆LT;！ - 为每个组 - ＆GT;
＆LT; DIV CLASS =刷卡滑NG重复=成群组＆GT; ＆LT; UL类=小块格2＆GT;
＆LT;李NG模型=输出NG重复=输出group.Outputs关于=output.TypeName级= NG-开关瓦{{output.TypeName}}＆GT;
＆所述; A HREF =数据揭示-ID =outputModal {{output.ID}}＆GT;
＆LT; I类=foundicon-理念块NG-开关时=dimmer1t＆GT;＆LT; / I＆GT;
＆LT; I类=foundicon-理念块NG-开关时=dimmer2t＆GT;＆LT; / I＆GT;
＆LT; I类=foundicon时钟块NG-开关时=定时器＆GT;＆LT; / I＆GT;
＆LT; I类=foundicon-笑脸块NG-开关默认＆GT;＆LT; / I＆GT;
＆LT; H2＆GT; {{output.CustomName}}＆LT; / H＆GT;
＆所述; / A＆GT;
＆LT;！ - 输出模式对话框 - ＆GT;
＆LT; DIV ID =outputModal {{output.ID}}级=显示模态XLARGE关于=output.TypeName＆GT NG-开关; ＆LT; H2＆GT; {{output.CustomName}}＆LT; / H＆GT; ＆LT; I类=foundicon-理念块NG-开关时=dimmer1t＆GT;＆LT; / I＆GT;
＆LT; I类=foundicon-理念块NG-开关时=dimmer2t＆GT;＆LT; / I＆GT;
＆LT; I类=foundicon时钟块NG-开关时=定时器＆GT;＆LT; / I＆GT;
＆LT; I类=foundicon-笑脸块NG-开关默认＆GT;＆LT; / I＆GT; ＆LT; DIV CLASS =切换大＆GT;
＆LT;输入ID =XNG点击=倒胃口（输出）NAME =SWITCH-X型=单选检查＆GT;
＆LT;标签=X＆GT;关闭＆LT; /标签＆gt; ＆LT;输入ID =X1NG点击=turnOn（输出）NAME =SWITCH-X型=单选＆GT;
＆LT;标签=X1＆gt;在＆LT; /标签＆gt; ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT; ＆所述;类别=近距离揭示峰＆GT;＆放大器;＃215;＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
您可以让您的刷卡启动（或更新）上的一个事件：
VAR刷卡= angular.module（'NG-刷卡'，['qbusService']）
.directive（'刷卡'，函数（）{ 返回{
链接：功能（范围，元素，ATTRS）{
element.swiper（{}）;
范围。在（刷卡更新$，函数（）{
element.swiper（{}）;
}）
}
};}）;
和要么每个幻灯片触发它（有效更新为每个新的滑动滑块），或者只有当NG重复完成后（使用NG-repeat的$范围内最后一个属性的$）。触发它
另外，你不需要创建这个指令，只需用NG-初始化运行更新的功能，例如：
＆LT; DIV CLASS =刷卡滑NG重复=组群NG-的init =updateSwiper（$最后一个）＆GT;
和对父范围相应的功能：
VAR刷卡= angular.module（'NG-刷卡'，['qbusService']）
.directive（'刷卡'，函数（）{ 返回{
链接：功能（范围，元素，ATTRS）{
scope.updateSwiper =功能（布尔）{
如果（布尔）element.swiper（{}）;
}
}
};}）;
I'm building a slider, and I'm using the ng-repeat directive to iterate a (RESTful) service to create the slides in the slider.
I've wrapped the slider in a custom directive to initialize it when it's done (ie. in the link function).
var swiper = angular.module('ng-swiper', ['qbusService'])
.directive('swiper', function(){
return {
link : function(scope, element, attrs) {
$(element).swiper({});
}
};
});
However the slider is not initialized correctly, am I missing something?
HTML:
<div class="swiper-container" swiper>
<div class="swiper-wrapper">
<!-- for each group -->
<div class="swiper-slide" ng-repeat="group in groups">
<ul class="small-block-grid-2">
<li ng-model="output" ng-repeat="output in group.Outputs" ng-switch on="output.TypeName" class="tile {{output.TypeName}}">
<a href="" data-reveal-id="outputModal{{output.ID}}">
<i class="foundicon-idea block" ng-switch-when="dimmer1t"></i>
<i class="foundicon-idea block" ng-switch-when="dimmer2t"></i>
<i class="foundicon-clock block" ng-switch-when="timer1"></i>
<i class="foundicon-smiley block" ng-switch-default></i>
<h2>{{output.CustomName}}</h2>
</a>
<!-- Output Modal Box -->
<div id="outputModal{{output.ID}}" class="reveal-modal xlarge" ng-switch on="output.TypeName">
<h2>{{output.CustomName}}</h2>
<i class="foundicon-idea block" ng-switch-when="dimmer1t"></i>
<i class="foundicon-idea block" ng-switch-when="dimmer2t"></i>
<i class="foundicon-clock block" ng-switch-when="timer1"></i>
<i class="foundicon-smiley block" ng-switch-default></i>
<div class="switch large">
<input id="x" ng-click="turnOff(output)" name="switch-x" type="radio" checked>
<label for="x">Off</label>
<input id="x1" ng-click="turnOn(output)" name="switch-x" type="radio">
<label for="x1">On</label>
<span></span>
</div>
<a class="close-reveal-modal">×</a>
</div>
</li>
</ul>
</div>
</div>
</div>
You can make your swiper initiate (or update) on an event:
var swiper = angular.module('ng-swiper', ['qbusService'])
.directive('swiper', function(){
return {
link : function(scope, element, attrs) {
element.swiper({});
scope.$on("swiper-update", function(){
element.swiper({});
})
}
};
});
And have either each slide trigger it (effectively updating the slider for each new slide) or only trigger it when the ng-repeat is finished (using the $last property in the ng-repeat's $scope).
Alternatively, you don't need to create a directive for this, just use ng-init to run an update function, for instance:
<div class="swiper-slide" ng-repeat="group in groups" ng-init="updateSwiper($last)">
and have a corresponding function on the parent scope:
var swiper = angular.module('ng-swiper', ['qbusService'])
.directive('swiper', function(){
return {
link : function(scope, element, attrs) {
scope.updateSwiper = function(bool){
if (bool) element.swiper({});
}
}
};
});
这篇关于AngularJS和jQuery插件后呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
