angularjs - angular.jsの特定のイベントでディレクティブを使用する方法

Question

私はこのようなhtmlを持っています、

  <div ng-controller="main">
     <div ng-sparkline class="first"></div>
     <div class="second"></div>
     <div class="third"></div>
     <div class="fourth"><button ng-click="save()">click</button></div>
  </div>

これは私のテンプレートです

  myApp.directive('ngSparkline', function ()
  {
     return
     {
       template: '<div>Hello! {{name}}</div>',
     };
  });

クリックボタンをクリックしたときに、このテンプレートを最初の (classname) div に追加したいと思います。クリックするたびにこのテンプレートを追加したいと思います。どうやってするか ？

Answer 1

Angular を使用するときは、jQuery の観点から考えないでください (私も最初はそうでした)。正しい解決策は次のとおりです。

• あなたの中に物（*）の配列があります$scope。
• この$scope.save()メソッドは、配列に things(*) を追加します。

• それらを次のように表示します（ディレクティブをまったく使用せずに）：

  <div class="first">
      <div ng-repeat="thing in arrayOfThings">Hello {{thing.name}}!</div>
  </div>
  

本当にテンプレートを使用したい場合 (表示されているよりも複雑だと思います - スパークライン)、テンプレートを繰り返します。

<div class="first">
    <div ng-repeat="thing in arrayOfThings">
        <div ng-sparkline>..do stuff with thing...</div>
    </div>
</div>

(*) "thing" は、適切なモデル オブジェクトです。