您好我有一些特定于视图的Java脚本。但是,当angularjs加载视图时,脚本不会执行。第一次运行脚本但脚本在更改范围时没有执行。主index.html不包含此javascript代码。这个代码在home.html中。 Index.html加载home.html但只有一次使用此javascript代码。
$('#layerslider').layerSlider({
skin : 'fullwidth',
hoverPrevNext : true,
navStartStop : false,
navButtons : false,
autoPlayVideos : false,
animateFirstLayer : false
});
var $carousel = $('.recent-blog-jc, .recent-work-jc');
var scrollCount;
function adjustScrollCount() {
if( $(window).width() < 768 ) {
scrollCount = 1;
} else {
scrollCount = 3;
}
}
function adjustCarouselHeight() {
$carousel.each(function() {
var $this = $(this);
var maxHeight = -1;
$this.find('li').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$this.height(maxHeight);
});
}
function initCarousel() {
adjustCarouselHeight();
adjustScrollCount();
var i = 0;
var g = {};
$carousel.each(function() {
i++;
var $this = $(this);
g[i] = $this.jcarousel({
animation : 600,
scroll : scrollCount
});
$this.jcarousel('scroll', 0);
$this.prev().find('.jcarousel-prev').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '-='+scrollCount,
carousel: g[i]
});
$this.prev().find('.jcarousel-next').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '+='+scrollCount,
carousel: g[i]
});
$this.touchwipe({
wipeLeft: function() {
$this.jcarousel('scroll','+='+scrollCount);
},
wipeRight: function() {
$this.jcarousel('scroll','-='+scrollCount);
}
});
});
}
$(function(){
$(window).load(function(){
initCarousel();
});
});
$(window).resize(function () {
$carousel.each(function() {
var $this = $(this);
$this.jcarousel('destroy');
});
initCarousel();
});
答案 0 :(得分:0)
尽可能将$scope.$apply()
尽可能地添加到async事件中,但请记住这不是最佳做法(您应该尝试尽一切可能&#34; Angular方式&#34;。)
答案 1 :(得分:0)
我用angular指令解决了这个问题。我使用angular.element获取元素(document.querySelector('....'))。我在指令模板中使用了ng-repeat。
directive('carousel', function () {
return {
restrict: 'A',
replace: true,
transclude: false,
template: ' <div class="blank floated"><div class="four columns carousel-intro"><section class="entire"><h3>{{homepage.header4}}</h3><p>{{homepage.text4}}</p></section><div class="carousel-navi"><div id="work-prev" class="arl active jcarousel-prev"><a href="javascript:void(0)" class="jcarousel-control-prev"><i class="icon-chevron-left"></i></a></div><div id="work-next" class="arr active jcarousel-next"><a href="javascript:void(0)" class="jcarousel-control-next"><i class="icon-chevron-right"></i></a></div></div><div class="clearfix"></div></div><section class="jcarousel recent-work-jc"><ul><li class="four columns" ng-repeat="work in works"><a href="#/projeler/{{work.id}}" class="portfolio-item" ><figure><img src="{{work.image}}" alt=""/><figcaption class="item-description"><h5>{{work.title}}</h5><span>{{work.type}}</span></figcaption></figure></a></li></ul></section></div>',
link: function link(scope, element, attrs) {
var container = $(element);
var carousel = container.children('.jcarousel')
carousel.jcarousel({
wrap: 'circular'
});
scope.$watch(attrs.images, function (value) {
carousel.jcarousel('reload');
});
angular.element(document.querySelector('#work-prev')).children('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
angular.element(document.querySelector('#work-next')).children('.jcarousel-control-next')
.jcarouselControl({
target: '-=1'
});
}
}
});