javascript - 控制 html 元素是否有类并将其传递给 Angular 属性

Question

我有一个控制 4 个选项卡的选项卡 Pane ，我可以使用 2 个按钮“上一个”和“下一个”切换选项卡，问题是我想禁用第一个和最后一个选项卡上的按钮，如何才能我在页面 Controller 中执行此操作？我正在尝试的是将 ng-disabled 设置为变量，然后运行 ​​if 来查看选项卡的第一个子级是否处于事件状态。但它不起作用

Html 选项卡代码 + 按钮

   <ul class="nav nav-tabs" data-tab-navigation="">
                        <li class="active">
                            <a href="#aba-atributos" role="tab" data-toogle="tab">Atributos</a>
                        </li>
                        <li>
                            <a href="#aba-historico" role="tab" data-toogle="tab">Histórico</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active painel-atributos" id="aba-atributos">
                            <div class="row">
                                <div class="col-xs-12 col-md-3 col-lg-2">
                                    <ul class="nav nav-list menu-etapas-formulario" data-tab-navigation="">
                                        <li class="active">
                                            <a href="#aba-identificacao" role="tab" data-toggle="tab"><span class="menu-text">Identificação</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-medidas" role="tab" data-toggle="tab"><span class="menu-text">Medidas</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-comercial" role="tab" data-toggle="tab"><span class="menu-text">Comercial</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-tributario" role="tab" data-toggle="tab"><span class="menu-text">Tributário</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-midias" role="tab" data-toggle="tab"><span class="menu-text">Mídias</span></a>
                                        </li>
                                        <li>
                                            <a href="#aba-nutricional" role="tab" data-toggle="tab"><span class="menu-text">Nutricional</span></a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-12 col-md-9 col-lg-10">
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="aba-identificacao">
                                            <partial:_abaIdentificacao runat="server" ID="_abaIdentificacao" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-medidas">
                                            <partial:_abaMedidas runat="server" ID="_abaMedidas" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-comercial">
                                            <partial:_abaComercial runat="server" ID="_abaComercial" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-tributario">
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-midias">
                                            <partial:_abaMidias runat="server" ID="_abaMidias" />
                                        </div>
                                        <div role="tabpanel" class="tab-pane" id="aba-nutricional">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2">
                                    <div class="text-center" ng-show="editMode">
                                        <br />
                                        <button type="button" name="voltar" class="btn btn-info btn-voltar" ng-disabled="firstTab">
                                            <i class="icon-backward bigger-110"></i>
                                            <span translate="15.BTN_Voltar">Voltar</span>
                                        </button>

我的 Controller 代码

  $scope.firstTab = function () {
            const el = document.getElementById(".menu-etapas-formulario > li:firstChild");
            if (angular.element(el).hasClass('active')) {
                return false;
            }
            else
                return true;                     
        }

Answer 1

使用这样的东西1. 在你的html元素中添加

ng-click="clicked($event)"

在您的 Controller 中

函数被点击(事件){ $超时(函数(){ $(event.target).attr('你的选择器'); //为您的元素设置一个 bool 值，例如 $scope.enabled }, 0); }