AngularJS在作用域改变后如何运行javascript

AngularJS how to run javascript after scope change?

本文关键字：运行 javascript 何运行作用域改变 AngularJS 更新时间：2023-09-26

嗨，我有一些特定于视图的Java脚本。然而，当angularjs加载视图时，脚本不会执行。第一次脚本运行，但脚本没有执行，当改变作用域。主索引。html不包括这个javascript代码。这段代码在home.html中。Index.html加载home.html，但只运行一次。

$('#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();
});

只是将$scope.$apply()添加到尽可能接近异步事件的位置，但请记住这不是最佳实践(您应该尝试尽您所能"以Angular的方式")。

我用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'
        });
    }
}
});