AngularJS：如果单击其他元素（使用 ng-focus/ng-blur），如何不失去对元素的关注？答案

【问题标题】：AngularJS: How to not lose focus on element if other elements are clicked (using ng-focus/ng-blur)?AngularJS：如果单击其他元素（使用 ng-focus/ng-blur），如何不失去对元素的关注？
【发布时间】：2016-07-25 15:57:06
【问题描述】：

ng-repeat 循环中有一些元素具有这些属性：

<div ng-repeat="h in myObjectArray">
    <div>
        <input ng-class="{ clicked: clickedFlag1 }" ng-focus="clickedFlag1 = true" ng-blur="clickedFlag1 = false" type="button" id="1" value="1" ng-click="btnSelected(1)" />
    </div>
    <div>
        <input ng-class="{ clicked: clickedFlag2 }" ng-focus="clickedFlag2 = true" ng-blur="clickedFlag2 = false" type="button" id="2" value="2" ng-click="btnSelected(2)" />
    </div>
</div>

当点击其中一个元素时会发生什么情况，它会将clicked 类添加到点击的元素，并从所有其他按钮输入中删除clicked 类。

问题是，如果我单击页面其余部分上的任何其他元素，我之前单击的元素不再具有焦点，并且将其 clicked 类删除。

是否仍然像我在上面使用的那样仍然使用ng-focus 和ng-blur，但是即使单击页面上的其他元素，单击的元素也具有clicked 类？

解释一下：在开始这个解决方案之前，我通过querySelector 定位元素，以这种方式添加和删除类。有人指出这种方式通过 AngularJS 使用 DOM 效率不高，所以我就采用了这种方式。

最初的问题是选择一个按钮，并且只选择该按钮来保存clicked 类。

现在的问题是，如果在页面上选择了其他任何内容，则该元素保留该单击的类。

【问题讨论】：

你能提供plunker吗
不确定我是否理解 - 你能解释一下你到底想做什么吗？只是需求，没有当前问题
@AlonEitan 是的，一旦从这些输入中选择了一个选项，就会将 clicked 类添加到输入按钮中，但如果此后单击页面上的任何其他元素（甚至是背景），之前被点击的元素失去焦点并失去类clicked。在单击页面上的其他元素后，按钮上的 clicked 类是否仍然处于活动状态？

标签： angularjs focus ng-class

【解决方案1】：

现在，当我知道您要做什么时，这就是我的建议

<div ng-repeat="h in myObjectArray">
    <div>
        <input ng-class="{ clicked: clickedFlag1 == $index }" ng-click="btnSelected(1, $index)" type="button" ng-attr-id="btn1_{{ $index }}" value="1" />
    </div>
    <div>
        <input ng-class="{ clicked: clickedFlag2 == $index }" ng-click="btnSelected(2, $index)" type="button" ng-attr-id="btn2_{{ $index }}" value="2" />
    </div>
</div>

现在，在您的控制器上，更改 btnSelected 函数并允许它接受第二个参数：

$scope.btnSelected = function(btnNumber, btnIndex) {
    if( btnNumber == 1 ) {
        $scope.clickedFlag1  = btnIndex;
    } else {
        $scope.clickedFlag2  = btnIndex;
    }
    // .... rest of your code
}

请注意，btnNumber 是一个虚构的名称，请将其替换为您在函数中使用的当前参数名称。

当您在 ngRepeat 内部时，您有 $index 引用循环中的当前索引，因此当您单击按钮时，您在单击第一个按钮时设置 clickFlag1 = $index（在控制器）在每个按钮组上或 clickFlag2 = $index 用于第二个按钮。

这将允许ngClass 根据当前索引在按钮上设置click 类，而不是信任焦点/模糊。

仅供参考 - 使用相同 id 的多个元素是一种不好的做法（您在 ngRepeat 内部），您可以将每个组上的第一个按钮的当前 id 更改为 ng-attr-id="btn1_{{ $index }}"，然后 @ 987654335@ 用于第二个按钮。不要忘记删除当前的id 属性。

【讨论】：