AngularJS指令（與范圍隔離的問題）

Question

我有一條指令負責確認過程的功能（請參見圖片）。 它按預期工作，除了單擊“提交”按鈕之后，所有tr的復選圖標都會顯示。 但是，只能將其顯示在已確認的tr處。

不幸的是，我無法創建一個可用的Plunker，並希望這些圖片足以讓您理解我的問題。

我究竟做錯了什么？

角度指令：

    .directive('confirm', function($timeout) {
      return {
        restrict: 'A',
        scope: true, // 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>

圖片：

1）

2）

3）

4）

5）

Answer 1

您在指令中使用scope: true 。 這樣做是創建一個從父范圍繼承的新子范圍，這與隔離范圍不同。 如果您在同一父級上有多個指令（在您的情況下，請confirm ），它們都將使用相同的子范圍。

明確說明：使用scope: true將創建一個新的子范圍， 除非已經存在一個子范圍（例如，由另一個指令創建）。 因此，在您的情況下，所有Confirm指令都使用相同的作用域。

您應該怎么做才能隔離示波器？

scope: {...}給它一個對象哈希。 這將創建一個完全隔離的作用域，這將使指令可以在相同作用域級別上重用，而不會彼此干擾。

您可以在此處找到關於此的更多信息： Angular JS Docs-Scope

scope屬性可以為false，true或對象：

false（默認）：不會為指令創建作用域。 該指令將使用其父級的范圍。

true：將為該指令的元素創建一個原型繼承自其父對象的新子作用域。 如果同一元素上的多個指令要求一個新范圍，則僅創建一個新范圍。

{...}（對象哈希）：為指令的模板創建了一個新的“隔離”范圍。 “隔離”作用域與常規作用域的不同之處在於，它不原型地繼承自其父作用域。 這在創建可重用的組件時非常有用，該組件不應意外讀取或修改父范圍中的數據。 請注意，沒有模板或templateUrl的隔離范圍指令不會將隔離范圍應用於其子元素。

更新：

您使用confirm四次，因此它會四次通過鏈接功能。 每次通過鏈接功能時，您都會將某些功能綁定到頁面上的按鈕。 名稱為termin-bestaetigen的按鈕具有四個綁定到它的事件，在tr的confirm中是三次，在div上是一次。 當您單擊按鈕時，所有這些事件都將觸發，而在所有這些事件中，您無需檢查任何內容，而只是顯示/隱藏所有內容。

在這種情況下，我建議您將指令分成更多的小塊（至少將tr和div上的confirm分開），並將某些功能定向到控制器。 您可以在confirm指令中添加一個屬性，您可以在該指令中觀察該屬性，一旦該屬性的值為true您就可以顯示/隱藏任何內容。