Блог

У меня есть директива, которая находится внутри 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 есть условие -повторите «slider.nativeAdHome», всякий раз, когда оно будет истинным, оно вызовет директиву. Я хочу, чтобы количество должно увеличиваться при каждом вызове директивы. Если он вызывается в первый раз в ng-repeat, значение счетчика должно быть 0, если оно вызывается во второй раз, значение счетчика должно быть 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>  

Выполните сравнение 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  ;
      }
  }
    }


})();