AngularJS-Directive (issue with isolating the scope)

angularjs

#1

I have a directive which is responsible for the functionality of a confirmation process (see pictures). It works as expected, except after clicking the Submit button, the check icon is displayed for all tr's. However, it should only be displayed at the tr, which has been confirmed.

Unfortunately, I could not create a working Plunker and hope that the picture is enough for you to understand my problem.

What am I doing wrong?

Angular-Directive:

.directive('confirm', function($timeout) {
  return {
    restrict: 'A',
    scope: {}, // isolate the scope to trigger target individually
    link: function(scope, element) {
      $timeout(function() {
        var barIcon = angular.element(element[0].querySelector('.config-menu-bars'));
        var banIcon = angular.element(element[0].querySelector('.config-menu-ban'));
        var checkIcon = angular.element(element[0].querySelector('.config-menu-checked'));
        var confirmLink = angular.element(element[0].querySelector('.confirm'));
        var textArea = angular.element(element[0].querySelector('.confirmation-note'));

        // These elements are outside the scope of the directive
        var confirmBox = angular.element('.accept-terminplanung');
        var submitButton = angular.element('.submit-appointment');
        var confirmCheckbox = angular.element('.appointment');

        // Hide barIcon and show banIcon, textArea and confirmBox
        confirmLink.bind('click', function() {
          barIcon.hide();
          banIcon.show();
          textArea.show();
          confirmBox.show();
        });

        // Hide banIcon, textArea, confirmBox and show barIcon
        banIcon.bind('click', function() {
          banIcon.hide();
          textArea.hide();
          confirmBox.hide();
          barIcon.show();
          confirmCheckbox.parent().removeClass('checked');
          submitButton.addClass("disabled");
        });

        // Hide barIcon, textArea, confirmBox and show checkIcon after clicking the submitButton
        submitButton.bind('click', function() {
          banIcon.hide();
          textArea.hide();
          confirmBox.hide();
          checkIcon.show();
          confirmCheckbox.parent().removeClass('checked');
          submitButton.addClass("disabled");
        });

        // checkbox functionality whithin the confirmBox
        confirmCheckbox.on('ifChecked', function() {
          submitButton.removeClass('disabled');
        });

        confirmCheckbox.on('ifUnchecked', function() {
          submitButton.addClass('disabled');
        });

      });
    }
  }
});

HTML:

    <table class="table table-hover">
      <thead>
        <tr>
          <th>Ausbildung</th>
          <th>Termine</th>
          <th>Ausbildungsstätte</th>
        </tr>
      </thead>
      <tbody>
        <tr confirm>
          <td>
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a aria-expanded="false" role="button" data-target="#" class="dropdown-toggle config-menu config-menu-bars" data-toggle="dropdown">
                  <i class="fa fa-bars"></i>
                </a>
                <a aria-expanded="false" role="button" class="dropdown-toggle config-menu config-menu-ban"  style="display: none;">
                  <i class="fa fa-ban"></i>
                </a>
                <a aria-expanded="false" role="button" class="dropdown-toggle config-menu config-menu-checked"  style="display: none;">
                  <i class="fa fa-check-square-o"></i>
                </a>
                <ul role="menu" class="dropdown-menu">
                  <li><a class="confirm" data-target="">Bestätigen</a></li>
                  <li><a class="move" data-target="">Verschieben</a></li>
                </ul>
              </li>
            </ul>
          </td>
          <td>
            <p><strong>Ausbildungsname</strong></p>
            <p>Kürzel</p>
          </td>
          <td>
            <p><strong class="text-navy">28.05.2016 </strong>| 09:00 - 16:00 Uhr</p>
            <p><strong class="text-navy">29.05.2016 </strong>| 09:00 - 16:00 Uhr</p>
            <p><strong class="text-navy">30.05.2016 </strong>| 09:00 - 16:00 Uhr</p>
          </td>
          <td>
            <p><strong>Ausbildungsstätte Wunderfull ABC</strong></p>
            <p>Musterstraße 1, 1234 Musterstadt</p>
            <p><i class="fa fa-th-large"></i></span> Seminarraum, Kursraum, Fitnessfläche</p>
          </td>
        </tr>
        <tr confirm>
          <td>
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a aria-expanded="false" role="button" data-target="#" class="dropdown-toggle config-menu config-menu-bars" data-toggle="dropdown">
                  <i class="fa fa-bars"></i>
                </a>
                <a aria-expanded="false" role="button" class="dropdown-toggle config-menu config-menu-ban"  style="display: none;">
                  <i class="fa fa-ban"></i>
                </a>
                <a aria-expanded="false" role="button" class="dropdown-toggle config-menu config-menu-checked"  style="display: none;">
                  <i class="fa fa-check-square-o"></i>
                </a>
                <ul role="menu" class="dropdown-menu">
                  <li><a class="confirm" data-target="">Bestätigen</a></li>
                  <li><a class="move" data-target="">Verschieben</a></li>
                </ul>
              </li>
            </ul>
          </td>
          <td>
            <p><strong>Ausbildungsname</strong></p>
            <p>Kürzel</p>
          </td>
          <td>
            <p><strong class="text-navy">28.05.2016 </strong>| 09:00 - 16:00 Uhr</p>
            <p><strong class="text-navy">29.05.2016 </strong>| 09:00 - 16:00 Uhr</p>
          </td>
          <td>
            <p><strong>Ausbildungsstätte Wunderfull ABC</strong></p>
            <p>Musterstraße 1, 1234 Musterstadt</p>
            <p><i class="fa fa-th-large"></i></span> Seminarraum, Kursraum, Fitnessfläche</p>
          </td>
        </tr>
        <tr confirm>
          <td>
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a aria-expanded="false" role="button" data-target="#" class="dropdown-toggle config-menu config-menu-bars" data-toggle="dropdown">
                  <i class="fa fa-bars"></i>
                </a>
                <a aria-expanded="false" role="button" class="dropdown-toggle config-menu config-menu-ban"  style="display: none;">
                  <i class="fa fa-ban"></i>
                </a>
                <a aria-expanded="false" role="button" class="dropdown-toggle config-menu config-menu-checked"  style="display: none;">
                  <i class="fa fa-check-square-o"></i>
                </a>
                <ul role="menu" class="dropdown-menu">
                  <li><a class="confirm" data-target="">Bestätigen</a></li>
                  <li><a class="move" data-target="">Verschieben</a></li>
                </ul>
              </li>
            </ul>
          </td>
          <td>
            <p><strong>Ausbildungsname</strong></p>
            <p>Kürzel</p>
          </td>
          <td>
            <p><strong class="text-navy">28.05.2016 </strong>| 09:00 - 16:00 Uhr</p>
          </td>
          <td>
            <p><strong>Ausbildungsstätte Wunderfull ABC</strong></p>
            <p>Musterstraße 1, 1234 Musterstadt</p>
            <p><i class="fa fa-th-large"></i></span> Seminarraum, Kursraum, Fitnessfläche</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="panel panel-default confirm-panel accept-terminplanung" confirm>
    <div class="panel-body text-muted ibox-heading">
      <form action="#" method="post" role="form">
        <div class="i-checks" ichecks>
          <label class="">
            <div class="icheckbox_square-green">
              <input type="checkbox" class="i-checks appointment">
            </div>
            <p class="no-margins">Hiermit  akzeptiere ich  die Bedingungen des geschlossenen Dozentenvertrages und nehme den Bildungsauftrag für die ausgewählten Ausbildungen verbindlich an.</p>
          </label>
        </div>
        <button type="button" name="termin-bestaetigen" class="btn btn-sm btn-w-m btn-warning submit-appointment disabled">Terminplanung übernehmen</button>
      </form>
    </div>
  </div>

Images: