0

我有一个在 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 等等。请解释我们如何实现这一点。

4

2 回答 2

1

它可以通过多种方式进行管理，其中一些方式：

  1. 双向绑定但像对象这样的复杂变量 -{ count:1 }
  2. 带有变量的服务并在控制器和指令中使用它
  3. 指令中局部变量的使用
  4. 删除隔离范围并增加复杂范围变量

(1)可能的解决方案 - https://jsfiddle.net/maciejsikora/31aqxmy3/（打开浏览器控制台以显示结果）。

（4）可能的解决方案https://jsfiddle.net/maciejsikora/sxn7nkrk/1/没有隔离范围（打开浏览器控制台以显示结果）。

(3)我展示了如何管理第三个命题，我在指令函数中创建了局部变量计数。变量仅在指令上可见。

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>

于 2016-09-29T08:17:49.340 回答
0

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


})();
于 2016-09-29T07:45:25.517 回答