范圍更改后，AngularJS如何運行javascript？

Question

嗨，我有一些特定於視圖的Java腳本。 但是，當angularjs加載視圖時，腳本不會執行。 首次運行腳本，但更改范圍后腳本未執行。main 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()盡可能地靠近異步事件添加，盡管請記住，這不是最佳實踐（您應該嘗試做所有可以“ Angular方式 ”的工作）。

Answer 2

我用角度指令解決了這個問題。 我得到與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'
        });
    }
}

});