javascript - 使用 ng-click 作用域内的目标元素

Question

有没有一种简单的方法来定位范围内的元素并更改类名或样式。

我曾经使用 Jquery 并简单地使用 .parent().find 来定位相关元素，但找不到应该完成相当简单任务的简单解决方案。

大多数解决方案似乎都非常复杂，我确信 Angular 消除了对大量代码的需求。

我想相对于 ng-click 元素或从范围的根定位并应用新的类名。

这是非常基本的场景，我需要按钮来更改 H1 的类。

<div>
    <h1 class="Blue">Welcome</h1>
    <ul>
       <li>
           <button ng-click="myFunction()">Change H1 to Red</button>
       </li>
    </ul>
</div>

任何意见，将不胜感激。

Answer 1

如果您要切换类，最好使用ng-class并打开某些属性：

html:

<div>
    <h1 ng-class="{Blue: !clicked, Red: clicked}">Welcome</h1>
    <ul>
       <li>
           <button ng-click="myFunction()">Change H1 to Red</button>
       </li>
    </ul>
</div>

控制器：

$scope.myFunction = function() {
   $scope.clicked = true;
}

但是，您也可以通过$event执行此操作传入函数以获取原始元素。虽然，这不是做事的“角度”方式：

html:

<button ng-click="myFunction($event)">Change H1 to Red</button>

控制器：

$scope.myFunction = function(e) {
   console.log(e.srcElement);
}