Incrément Valeur dans la directive

Question

J'ai une directive qui est dans ng-repeat. Par exemple:

<div class="nx-owl-col" nx-owl-carousel-item ng-repeat="slider in slides track by $index"> 
 
    <div class="clearfix nx-item-wrapper nx-shaddow1" ng-  if="slider.nativeAdHome==='nativeAdHome'"> 
 
    <nx-dfp-ad carousel-data="0"></nx-dfp-ad> 
 

 
    </div> 
 
</div>

Ma directive:

(function() { 
 
    'use strict'; 
 

 
    angular 
 
     .module(NgApp) 
 
     .directive('abc', ABC); 
 

 

 
    function ABC($compile) { 
 

 
    return { 
 
     restrict: "EA", 
 
     scope: { 
 
     }, 
 
     link: function (scope, element, attrs) { 
 
       scope.count =0; 
 
       element.append("<div id='div-" + scope.count +"' style='height:250px; width:300px;'>"); 
 
       $compile(element.contents())(scope) 
 
       scope.count++; 
 
     } 
 
    } 
 
    } 
 

 

 
})();

Il est en état ng répétition "slider.nativeAdHome", chaque fois qu'il sera vrai, il appellera la directive. Je veux que le compte soit incrémenté chaque fois que la directive est appelée. Si elle a appelé la première fois dans ng-repeat, la valeur de comptage doit être 0, si elle est appelée, la seconde valeur de comptage doit être 1, etc. Veuillez expliquer comment nous pouvons y parvenir.

Answer 1

Effectuez la comparaison ng-if dans le contrôleur.

Dans votre contrôleur principal

$scope.countNum= 0; 
    $scope.IsNativeAdHome = function(slider){ 
     if(slider.nativeAdHome==='nativeAdHome'){ 
     $scope.countNum++; 
     return true; 
    } 
} 

En HTML

<div class="nx-owl-col" nx-owl-carousel-item ng-repeat="slider in slides track by $index"> 
    <div class="clearfix nx-item-wrapper nx-shaddow1" ng-if="IsNativeAdHome(slider)"> 
    <nx-dfp-ad carousel-data="0" count-num={{countNum}}></nx-dfp-ad> 

    </div> 
</div> 

Dans la directive

(function() { 
    'use strict'; 

    angular 
     .module(NgApp) 
     .directive('abc', ABC); 


    function ABC($compile) { 

    return { 
     restrict: "EA", 
     scope: { 
     countNum:'@' 
     }, 
     link: function (scope, element, attrs) { 
       scope.count = scope.countNum; 
       element.append("<div id='div-" + scope.count +"' style='height:250px; width:300px;'>"); 
       $compile(element.contents())(scope) 
       scope.count++; 
     } 
    } 
    } 


})(); 

Answer 2

Il peut être géré par bien des égards, certains d'entre eux:

1. deux voies de liaison mais variable complexe comme objet - { count:1 }
2. le service avec la variable et l'utiliser dans le contrôleur et la directive
variables utilisation
3. de variable locale dans la directive
4. supprimer la portée isolée et incrémenter champ complexe

(1) solution possible - https://jsfiddle.net/maciejsikora/31aqxmy3/ (ouvrez la console du navigateur pour afficher les résultats).

(4) solution possible https://jsfiddle.net/maciejsikora/sxn7nkrk/1/ sans portée isolée (ouvrir la console du navigateur pour afficher les résultats).

(3) Je montre comment gérer la troisième proposition, j'ai créé le nombre de variables locales à l'intérieur de la fonction directive. La variable est visible uniquement sur la directive.

var NgApp=angular.module("app",[]); 
 

 
(function() { 
 
    'use strict'; 
 

 
    angular 
 
     .module("app") 
 
     .controller("cont",Cont) 
 
     .directive('abc', ABC); 
 

 
    function Cont($scope){ 
 
      //example data 
 
      $scope.slides=[ 
 
      
 
      { 
 
       nativeAdHome:"nativeAdHome" 
 
      },{ 
 
       nativeAdHome:"somethingElse", 
 
      }, 
 
      { 
 
       nativeAdHome:"nativeAdHome" 
 
      }, 
 
      { 
 
       nativeAdHome:"nativeAdHome" 
 
      } 
 
      ]; 
 
     
 
    }; 
 
    
 

 
    function ABC($compile) { 
 

 
    //local variable - shared between all directive usage 
 
    var count=0; 
 
     
 
    return { 
 
     restrict: "EA", 
 
     link: function (scope, element, attrs) { 
 
     
 
       
 
     console.log("Current count = "+count); 
 
     count++; 
 
     
 
     } 
 
    }; 
 
     
 
    } 
 

 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="cont"> 
 
    
 
<div class="nx-owl-col" nx-owl-carousel-item ng-repeat="slider in slides track by $index"> 
 
    <div class="clearfix nx-item-wrapper nx-shaddow1" ng-if="slider.nativeAdHome==='nativeAdHome'"> 
 
    <abc carousel-data="0"></abc> 
 

 
    </div> 
 
</div> 
 
    
 
    </div>