Angularディレクティブテンプレートのインクリメント値

Question

これは私の問題です。インクリメンタルな値を持つページ上の要素に、テンプレートを含むディレクティブを適用したいと考えています。

私の問題は、私の価値は0にとどまり、私はstackoverflowで多くの答えを試みましたが、成功しなかったので、私は全く新しい角度になっています。ここ

は私のディレクティブです：

app.directive('loader', function ($window) { 

return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    controller: function($scope){ 
     if (!$scope.counter) 
      $scope.counter = 0; 
     else 
      $scope.counter++; 
    }, 
    template: '<div ng-class=\"({ \'display-opacity\' : ready{{counter}} })\" ng-transclude></div>', 
}; 

}); 

要求されるように、ここに私のパグテンプレートは次のとおりです。

loader 
    | test 
loader 
    | test 

Answer 1

transcludeオプションについてのドキュメントを読んだ後、私は以下を参照してください（何かを書くつもりでした）、しかしcodepenで遊んだ後、私はさらに混乱しました。私は、あなたがやろうとしていることはやや難しいと思います。

クイック（おそらく汚れた）解決方法は、カウンターにサービスを使用することです。 https://codepen.io/anon/pen/vxwpxo

app.directive('loader', function(myCounter) { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: {}, 
    template: '<div>{{opacity}}</div>', 
    link: function(scope) { 
     scope.opacity = myCounter.get(); 
    } 
    }; 
}); 

app.factory('myCounter', function() { 
    var counter = 0; 

    return { 
    get: function() { 
     return counter++; 
    } 
    }; 
}); 

---

前の思考：

transcludeオプションは、スコープがネストされている方法を変更します。それは、トランスコードされたディレクティブの内容が、内部にあるスコープではなく、ディレクティブの外側にあるすべてのスコープを持つようにします。そうすることで、コンテンツは外部スコープにアクセスできるようになります。

scopeがscope.name = 'Jeff';にある場合、そのディレクティブが外部スコープを参照するため、出力にJeffが表示されることに注意してください。

https://code.angularjs.org/1.4.6/docs/guide/directive

counterが定義されているあなたのディレクティブ外のコントローラを持っている場合、私は、知りません。 yesの場合、ディレクティブコントローラのコードはcounterの値を変更しません（ドキュメントが正しく理解されている場合）。 noの場合、各ディレクティブはcounterをインスタンス化し、まだ設定されていないため、if (!$scope.counter)は常にtrueになります。ディレクティブが分離されたスコープを持っているかどうかは、動作が異なっています。 私は混乱しています！