繼續執行指令

Question

我開始使用角度。我想要一個接一個的指令，但我不知道。

我的模板，它顯示了一個旋轉木馬。每個L1 containe 6張圖片：

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

RN-轉盤使用Li轉盤：https://github.com/revolunet/angular-carousel

的這個控制器：

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

轉盤-指令（示出了一個表的6部li）：

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)); 
     }); 
    } 
}; 
}]); 

我看到指令的優先選項，但它不是解決方案。 我謹與指令「NR-旋轉木馬」指令的UL在我的「carouselDirective」如下：

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 
     }); 

這很可能可以解決您的問題。