Question

我从棱角开始。我希望一个接一个的指令，但我没有。

我的模板，它显示了一个旋转木马。每个li容纳6张图片：

<section class="page">
<ul class="row menu_image image" rn-carousel="" rn-carousel-indicator="">
    <div carousel-Directive="" file="fichier"></div>
</ul>
</section>

rn-carousel用li：https://github.com/revolunet/angular-carousel

制作旋转木马

这个控制器：

function troupesController($scope, $routeParams, $http) {
    $scope.fichier ="js/data/troupes.json";
}

carousel-Directive（显示li中表的6部分）：

app.directive("carouselDirective", ["$compile", "$http", function ($compile, $http) {    
return {
    restrict: "A",
    scope:{
        file:'='
    },
    link: function (scope, element,attr) {

        $http.get(scope.file).success(function(data) {

             var dataset = scope.file;//data;
             var html='<li>';
                angular.forEach(dataset,function(item,index){
                     if(index%6==0 && index!==0){
                         html+="</li><li>";
                     } 

                    html+='<div class="col-xs-6 col-sm-4">';        
                    html+=    '<a href="#/troupes"><img src="img-min/'+item.basic_image+'" alt="'+item.name+'" /></a>';
                    html+='</div>';
                });

                html+="</li>";
                element.append($compile(html)(scope));
        });
    }
};
}]);

我已经看到了指令的优先级选项，但它不是解决方案。我在我的'carouselDirective'中使用指令'nr-carousel'指令移动ul，如下所示：

app.directive("carouselDirective", ["$compile", "$http", function ($compile, $http) {    
return {
    restrict: "A",
    scope:{
        file:'='
    },
    link: function (scope, element,attr) {

        $http.get(scope.file).success(function(data) {

             var dataset = scope.file;//data;
             var html='<ul class="row menu_image image" rn-carousel="" rn-carousel-indicator=""><li>';
                angular.forEach(dataset,function(item,index){
                     if(index%6==0 && index!==0){
                         html+="</li><li>";
                     } 

                    html+='<div class="col-xs-6 col-sm-4">';        
                    html+=    '<a href="#/troupes"><img src="img-min/'+item.basic_image+'" alt="'+item.name+'" /></a>';
                    html+='</div>';
                });

                html+="</li></ul>";
                element.append($compile(html)(scope));
        });
    }
};
}]);

但我有这个错误：

Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.13/$rootScope/inprog?p0=NaNigest
at Error (<anonymous>)
at http://guide-coc.programmation-web.fr/js/libs/angular/angular.min.js:6:450
at n (http://guide-coc.programmation-web.fr/js/libs/angular/angular.min.js:98:34)
at h.$digest (http://guide-coc.programmation-web.fr/js/libs/angular/angular.min.js:101:144)
at x (http://guide-coc.programmation-web.fr/js/libs/angular-carousel/angular-carousel.min.js:8:2555)
at http://guide-coc.programmation-web.fr/js/libs/angular-carousel/angular-carousel.min.js:8:4811
at I (http://guide-coc.programmation-web.fr/js/libs/angular/angular.min.js:49:397)
at h (http://guide-coc.programmation-web.fr/js/libs/angular/angular.min.js:42:437)
at http://guide-coc.programmation-web.fr/js/libs/angular/angular.min.js:42:105
at http://guide-coc.programmation-web.fr/js/app.js:62:44

Answer 1

是的，这个问题是，它表明你有多个摘要尝试同时运行。当您在摘要开始时点击请求并且因为它无法停止时，您的代码会触及第二个摘要，这就是它在进展中显示摘要的原因。

$element.on('click', function() {
        $scope.$apply(doSomeWork); // <<< the $apply call was moved to the callsite that doesn't execute in $apply call already
      });

这很可能解决了你的问题。

执行一个接一个的指令

1 个答案: