AngularJS как запустить javascript после изменения области?

Question

Привет, У меня были некоторые сценарии 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(); 
}); 

Answer 1

Просто добавьте $scope.$apply() как можно ближе к событию асинхронным, насколько это возможно, хотя имейте в виду, что это не лучшие практики (вы должны попытаться сделать все, что вы можете «Угловая путь»).

Answer 2

Я исправляю эту проблему с помощью угловой директивы. Я получаю элемент с угловым элементом (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' 
     }); 
    } 
} 

});