使用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);
}