Значение приращения в директиве

Question

У меня есть директива, которая находится внутри ng-repeat. Например:

<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>

Моя директива:

(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++;
      }
  }
    }


})();

В ng-repeat "slider.nativeAdHome" есть условие, когда оно будет истинным, оно будет вызывать директиву. Я хочу, чтобы счетчик увеличивался при каждом вызове директивы. Если он вызвал первый раз в ng-repeat, значение счетчика должно быть 0, если он вызвал значение второго раза, должно быть 1 и т. Д. Пожалуйста, объясните, как мы можем этого достичь.

Answer 1

Им можно управлять многими способами, некоторые из них:

1. двусторонняя привязка, но сложная переменная, как объект - { count:1 }
2. служба с переменной и использование ее в контроллере и директиве
3. использование локальной переменной в директиве
4. удалить изолированную область и увеличить сложную переменную области

(1) возможное решение - https://jsfiddle.net/maciejsikora/31aqxmy3/ (откройте консоль браузера, чтобы показать результаты).

(4) возможное решение https://jsfiddle.net/maciejsikora/sxn7nkrk/1/ без изолированной области (откройте консоль браузера, чтобы показать результаты).

(3) Я показываю, как управлять третьим предложением, я создал локальную переменную count внутри директивной функции. Переменная видна только по директиве.

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>

Answer 2

Выполните сравнение ng-if в контроллере.

В вашем главном контроллере

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

В 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>

В директиве

(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++;
      }
  }
    }


})();