Html 如果单击，则在单击另一个元素之前提供活动类，然后提供第二个元素活动类并从第一个元素中删除活动类

我试图在单击的小部件磁贴上保持类“活动”，直到它的另一个同级被单击为止（不管页面上的任何其他单击操作）。这在小部件中起作用，但是如果用户单击页面上的另一个元素，活动状态将被删除。我怎样才能防止这种情况

在互动程序上：

我尝试了：

ng-class="clickButton ? 'active' : '' " 

及

及

（showRespectiveEvent导致ng include启动页面上另一个小部件的可见性）

我也试过：

还有许多其他的解决方案，但似乎没有任何效果

显示在页面上的小部件代码（非常简化，以保护隐私）：

//磁贴小部件页面的代码：
希望这能让你走上正确的方向：


（函数（）{
var app=angular.module（'tileApp'，[]）；
app.controller（'TileController'，function（）{
this.activeTile=null；
this.someButtons=[{
标题：“标题1”，
数据：“数据1”，
}, {
标题：“标题2”，
数据：“数据2”，
}, {
标题：“标题3”，
数据：“数据3”，
}];;
this.clickButton=函数（索引）{
this.activeTile=索引；
}
});
})();
.tileContainer{
显示：网格；
间隙：20px；
网格模板列：重复（3，1fr）；
}
.瓷砖{
颜色：紫色；
边框：1px纯紫色；
填充：20px；
光标：指针；
}
.tile.active{
字号：900；
颜色：深粉色；
边框：1px纯色深粉色；
背景：粉红色；
}

文件
活动瓷砖
{{button.title}}
{{button.data}
希望这能让你朝着正确的方向前进：


（函数（）{
var app=angular.module（'tileApp'，[]）；
app.controller（'TileController'，function（）{
this.activeTile=null；
this.someButtons=[{
标题：“标题1”，
数据：“数据1”，
}, {
标题：“标题2”，
数据：“数据2”，
}, {
标题：“标题3”，
数据：“数据3”，
}];;
this.clickButton=函数（索引）{
this.activeTile=索引；
}
});
})();
.tileContainer{
显示：网格；
间隙：20px；
网格模板列：重复（3，1fr）；
}
.瓷砖{
颜色：紫色；
边框：1px纯紫色；
填充：20px；
光标：指针；
}
.tile.active{
字号：900；
颜色：深粉色；
边框：1px纯色深粉色；
背景：粉红色；
}

文件
活动瓷砖
{{button.title}}
{{button.data}
您是否可以编辑您的问题以显示wtl的实际功能。单击按钮（0）
？这个函数看起来像什么？好的，我添加了wtl.clickButton的函数。谢谢你看！
Thank you KIMS中缺少的“clickButton”，这只是一个例子。实际的代码中缺少引号。你能编辑你的问题来显示
wtl.clickButton（0）
的实际功能吗？该函数看起来像什么？好的，我为wtl.clickButton添加了函数。谢谢你看一看。
Thank you KIMS中缺少的“clickButton”，这只是一个例子。实际代码缺少引号。
ng-class="{'active' : clickButton = true}"

ng-class="showRespectiveEvent ? 'active' : '' "

<div>
   <div>
       <ng-include src="'Widget Tile Page'"></ng-include>
   </div>

<!-- This is the widget that the tiles hide/show when clicked -->
   <div class="row">
        <div ng-if="thisPageCtrl.showRespectiveEvent"></div>
   </div>
</div>

// Code for Tile Widget Page:

<div ng-controller="tile as wtl">
    <div class="row>
       <div class="tile" ng-click="wtl.clickButton(0)">
          <div>{{wtl.someButtons[0].title}}</div>
          <div>{{wtl.someButtons[0].data}}</div>
       </div>
    </div>
</div>

<script>
$scope.clickButton = clickButton 

function clickButton(iIndex) {
        var btn = $scope.someButtons[iIndex];
        $rootScope.$emit("highLight", btn);
    }
</script>    

// CSS:

.tile {
color: purple;
border: 1px solid purple;
}

.tile.active {
font-weight: 900;
color: deeppink;
border: 1px solid deeppink
}