javascript - AngularJS - 如何通过q​​uerySelector获取所有元素并禁用链接

Question

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

HTML 代码(在index.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>

上面的代码在由 jQuery 触发时工作正常，如下所示 函数stepnext(n){

function step(n){
    if(n != 0){
        $(".stepwizard-row a").removeClass('btn-primary');
        $(".stepwizard-row a").addClass('btn-default');
        $('.stepwizard-row #step-'+n+'').removeClass('btn-default');
        $('.stepwizard-row #step-'+n+'').addClass('btn-primary');
    }
}

但我已将其移动到每个步骤 Controller 并将其触发为

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');

对于每个#step-X

依次类推

它可以很好地选择 btn-primary 的每个步骤，但是当我按照从 2 到 3 的下一步操作时，不会将类从步骤 2 重置为 btn-default 仅对 .stepwizard-row a 中的第一个元素(即步骤#1)生效。

我的问题是如何选择 .stepwizard-row a 的所有 DOM 元素？

另一个问题与链接“禁用”直到着陆或通过特定步骤有关。我已将它们设置为 disabled="disabled" 但 AngularJS 让我单击它们并跳过步骤。

Answer 1

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

更好的方法是使用 ngClass并根据表达式添加/删除 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>

然后，您可以根据需要在 Controller 中实现 notCurrentStep 和 currentStep 函数。

至于 disabled 属性，正如 @Knitesh 提到的，最好使用 ngDisabled这样您就可以根据表达式动态添加/删除 disabled 属性。