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」に条件があり、trueになるたびにディレクティブを呼び出します。ディレクティブが呼び出されるたびにカウントをインクリメントする必要があります。ng-repeat で初めて呼び出された場合、カウント値は 0 である必要があり、2 回目に呼び出された場合、カウント値は 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) 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>

于 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 に答える