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>',
     };
  });

当我单击单击按钮时，我想将此模板附加到第一个（类名）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>

(*) “事物”是您合适的模型对象。