指令中的递增值

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重复 “slider.nativeAdHome”，每当它会如此之将调用指令。我希望计数应该在每次调用指令时增加。如果在ng-repeat中第一次调用计数值应该是0，如果它叫第二次计数值应该是1等。 请解释我们如何实现这一点。

Answer 1

在控制器中进行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++; 
     } 
    } 
    } 


})(); 

Answer 2

它可以通过多种方式来管理，他们中的一些：

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>