Question

如果我有这段代码：

<li ng-repeat='i in items'>
    <a ng-click='doSomething(i.id)'>link</a>
</li>

和这个JS：

function doSomething(objId) {
    $.ajax({ url: 'myUrl.php', success: successHandler});
}

function successHandler(response) {
 // do something with the response
}

用户单击链接，更改类，发出AJAX请求，然后调用成功处理程序（为简洁起见，我省略了错误处理程序）。

我需要一些干净的方法来访问其子项在两个函数中都发起click事件的<li>元素：

在doSomething()中（例如写＆＃34; loading ...＆＃34;并添加＆＃34; loading＆＃34; CSS类，可能与ng-class ）
在successHandler()中（如果成功，请删除＆＃34;加载...＆＃34;并删除该课程）

实现这一目标的最佳方法是什么？我试过了：

使用数据属性（我不能在Angular中操纵它们而不能解决问题）
使用全局变量（哇，坏）
使用范围变量，例如$scope.currentClickedItem

Answer 1

我建议不要直接访问dom元素。实现角度目标的最佳方法是：

HTML：

<li ng-repeat='i in items'>
    <a ng-click='doSomething(i)' ng-class="{active: i.isActive}">link</a>
</li>

JS：

function doSomething(obj) {
    $.ajax({ url: 'myUrl.php', success: successHandler.bind(this, obj});
}

function successHandler(obj, response) {
    // do anything with the response and object
    obj.isActive = true;
}

但无论如何，你想要访问dom：

您可以使用angular $ event对象来访问被点击的元素。如果您需要访问<li>，element.parentElement就是您的朋友。

HTML：

<li ng-repeat='i in items'>
    <a ng-click='doSomething(i.id, $event)'>link</a>
</li>

JS：

function doSomething(objId, $event) {
    var element = $event.target;
    $.ajax({ url: 'myUrl.php', success: successHandler.bind(this, element});
}

function successHandler(element, response) {
    // do anything with the response and element
}

绑定方法的第一个参数可以是null而不是this，如果它们不需要共享相同的范围。

Answer 2

您可以操纵对象而不是元素。

<li ng-repeat='i in items'>
  <a ng-class="i.loading ? 'loading' : ''" ng-click='doSomething(i)'>link</a>
</li>

JS

function doSomething(obj) {
    obj.loading = true;
    var objId = obj.id;
    $.ajax({ url: 'myUrl.php', success: successHandler});
}

function successHandler(response) {
    // do something with the response
}

Answer 3

我会回答我自己的问题，但留下@ CKK＆＃39;＃34;回答＆＃34;。我无需操纵doSomething()中的元素，因为我可以这样做：

<li ng-class='i.class' ng-repeat='i in items'>
   {{ i.message }}
   <a ng-click='doSomething(i)'>...</a>
</li>

使用Javascript：

function doSomething(obj)
{
     obj.class='loading-class';
     obj.message="Loading...";
    // ajax call...
}

操纵引发事件的DOM元素

3 个答案: