Javascript AngularJS-如何通过querySelector获取所有元素并禁用链接

我正在尝试制作一个简单的逐步向导

index.HTML中的HTML代码如下所示

<div class="stepwizard col-md-offset-3">
    <div class="stepwizard-row setup-panel">
      <div class="stepwizard-step">
        <a href="/" type="button" class="btn btn-default btn-circle" id="step-1">1</a>
        <p>Start</p>
      </div>
      <div class="stepwizard-step">
        <a href="/registration" type="button" class="btn btn-default btn-circle" disabled="disabled" id="step-2">2</a>
        <p>Registration</p>
      </div>
      <div class="stepwizard-step">
        <a href="/tutorial" type="button" class="btn btn-default btn-circle" disabled="disabled" id="step-3">3</a>
        <p>Tutorial</p>
      </div>
      <div class="stepwizard-step">
        <a href="/thank-you" type="button" class="btn btn-default btn-circle" disabled="disabled" id="step-4">4</a>
        <p>Finish</p>
      </div>
    </div>        
  </div>

但我已经将其移动到每个步骤控制器，并在

var stepReset = angular.element( document.querySelector( '.stepwizard-row a' ) );
stepReset.removeClass('btn-primary');
stepReset.addClass('btn-default');

var stepActive = angular.element( document.querySelector( '#step-1' ) );
stepActive.removeClass('btn-default');
stepActive.addClass('btn-primary');

对于每个步骤X，依此类推

它可以很好地为btn主节点在每个步骤上进行选择，但当我执行下一个步骤（如从2到3）时，并没有将类从步骤2重置为btn默认值，只是在.stepwizard行a（即步骤1）的第一个元素上生效

我的问题是如何为.stepwizard行a选择所有DOM元素

---

另一个问题是在着陆或通过特定步骤之前禁用链接。我已经将它们设置为disabled=disabled，但AngularJS允许我单击它们并跳过步骤。

在AngularJS中很少需要手动查询DOM中的元素，在极少数需要此功能的情况下，指令更适合

更好的方法是基于表达式使用和添加/删除btn default和btn primary类，如下所示：

<a href="/" type="button" class="btn btn-circle" ng-class="{'btn-default': notCurrentStep(), 'btn-primary': currentStep()}" id="step-1">1</a>

然后，您可以根据需要在控制器中实现notCurrentStep和currentStep功能

---

至于disabled属性和@Knitesh提到的，最好使用它，以便您可以基于表达式动态添加/删除disabled属性。

在AngularJS中很少需要从DOM手动查询元素，在极少数需要此功能的情况下，更适合使用指令

更好的方法是基于表达式使用和添加/删除btn default和btn primary类，如下所示：

<a href="/" type="button" class="btn btn-circle" ng-class="{'btn-default': notCurrentStep(), 'btn-primary': currentStep()}" id="step-1">1</a>

然后，您可以根据需要在控制器中实现notCurrentStep和currentStep功能

---

对于disabled属性和@Knitesh提到的，最好使用它，以便您可以基于表达式动态添加/删除disabled属性。

类似且更简单的方法是：

<a href="/" type="button" class="btn btn-circle" ng-class="{'btn-default': step === 1, 'btn-primary': step !== 1 }" id="step-1">1</a>

---

类似且更简单的方法是：

<a href="/" type="button" class="btn btn-circle" ng-class="{'btn-default': step === 1, 'btn-primary': step !== 1 }" id="step-1">1</a>

---

对于disabled=disabled使用ng disabled@Knitesh ngDisabled它会生成button disabled语句，但单击它仍然会影响到该语句的路由URL@Knitesh我已经解决了ngDisable的问题，但它导致了另一个问题，这里的disabled=disabled使用ng disabled@Knitesh ngDisabled它会生成按钮禁用语句，但单击它还是要这样做URL@Knitesh我已经解决了ngDisable的问题，但这导致了另一个问题，我是否应该使用$rootScope as在每个步骤从特定控制器执行时对index.html没有任何影响。我是否应该使用$rootScope as在每个步骤从特定控制器执行时对index.html没有任何影响step.ngDisabled它使button disabled语句无效，但单击它仍会影响到路由到该URL我已解决了某种ngDisabled情况，但它会导致另一个问题此处ngDisabled它使button disabled语句无效，但单击它仍会影响到路由到该URL我已解决某种ngDisabled情况，但会导致另一个问题这里有问题