0

ここにデモがあります: http://plnkr.co/edit/atZZXM6YVYQL0SilpWxq?p=preview

テーブルに、コレクションの各値を表示します。すべて問題ありません。しかし、リスト内の 1 つの要素を削除すると、コントローラーは更新されません。各要素の後に編集行を追加および削除するために、ディレクティブを選択します。私はそれが必要jQueryでしたが、それを達成するためのよりエレガントな方法があるかもしれません。$watchまたは$broadcastが欠落していると思います。

HTML

<table>
    <tr ng-repeat="item in items" item-directive="item"></tr>
    <tr>
      <td>Total</td>
      <td>{{getTotal()}}</td>
    </tr>
</table>

AngularJS

app.directive("itemDirective", function($compile){
  var trLine = '<tr><td>{{itemDirective.name}}</td><td>{{itemDirective.value}}</td>'
          +'<td><button ng-click="edit()">Edit</button></td>'
          +'<td><button ng-click="remove()">Remove</button></td>'
          +'<td><button ng-click="removeFromController()">Remove from controller</button></td>'
          +'</tr>';
  var trEditLine = '<tr class="editLine"><td style="background: #E6E6E6"><div>'
          +'<button ng-click="done();">Done</button>'
          +'<button  ng-click="cancel();">Cancel</button></div></td>'
        +'</tr>';
    return {
        template: trLine,
        replace: false,
        scope: {
          itemDirective: '='
        },
        link: function(scope, element, attrs) {
          scope.edit = function() {
            if(!element.edited) {
              element.edited = true;
              element.after($compile(trEditLine)(scope));
            }
          };
          scope.cancel = function() {
            element.edited = false;
            $(".editLine").remove();
          };
          scope.done = function() {
            element.edited = false;
            $(".editLine").remove();
          };
          scope.remove = function() {
            element.remove();
          };
        }
    };
});

これにより、期待どおりに行が削除されますが、合計は変わりません。

どんな助けでも大歓迎です。

4

1 に答える 1

1

removeFromController()ディレクティブにメソッドを提供し（分離スコープを使用しているため）、次ng-repeatのように記述します。

 <tr ng-repeat="item in items" item-directive="item" invoke="removeFromController()">

今ディレクティブ：

scope: {
      itemDirective: '=',
      invoke: '&'
    },

とtrLine:

var trLine = '<tr><td>{{itemDirective.name}}</td><td>{{itemDirective.value}}</td>'
          +'<td><button ng-click="edit()">Edit</button></td>'
          +'<td><button ng-click="remove()">Remove</button></td>'
          +'<td><button ng-click="invoke()">Remove from controller</button></td>'
          +'</tr>';

編集済みを参照Plunker

于 2013-11-14T12:08:20.577 に答える