0

このディレクティブの目的は、あらゆる種類の html 要素にアタッチして再利用できる Select-All ディレクティブを作成することです。

コーヒースクリプト:

App.directive "selectAll", [ ->
  restrict: 'A',
  replace : true,
  scope: {
    attribute: '@',
    collection: '='
  },  
  link: (scope, element, attrs, model) ->
    scope.selected = false

    element.attr 'ng-click', 'toggle_selection()'
    element.html "<i class='icon-check icon-white''></i>Select All"

    scope.toggle_selection = () ->
      scope.selected = !scope.selected
      collection.forEach (item) ->
        item[attribute] = scope.selected
      scope.toggle_content()

    scope.toggle_content = () ->
      element.html("<i class='icon-check icon-white'></i>Select All") unless scope.selected
      element.html("<i class='icon-check-empty icon-white'></i>Unselect All") if scope.selected
]

Javascript:

App.directive("selectAll", [
    function() {
      return {
        restrict: 'A',
        replace: true,
        scope: {
          attribute: '@',
          collection: '='
        },
        link: function(scope, element, attrs, model) {
          scope.selected = false;
          element.attr('ng-click', 'toggle_selection()');
          element.html("<i class='icon-check icon-white''></i>Select All");
          scope.toggle_selection = function() {
            scope.selected = !scope.selected;
            collection.forEach(function(item) {
              return item[attribute] = scope.selected;
            });
            return scope.toggle_content();
          };
          return scope.toggle_content = function() {
            if (!scope.selected) {
              element.html("<i class='icon-check icon-white'></i>Select All");
            }
            if (scope.selected) {
              return element.html("<i class='icon-check-empty icon-white'></i>Unselect All");
            }
          };
        }
      };
    }
  ]);

問題は、toggle_selection 関数が呼び出されていないことです。動的に作成した要素を呼び出そうと$compileしましたが、コンパイルが定義されていないという例外が発生しました。

また、私が行っていることを行うためのより良い方法があれば、ベスト プラクティスを共有してください。私は Angular を 1 週間も使用していないからです。

ありがとうございました!

4

1 に答える 1