在AngularJS中，如何访问触发事件的元素？

16 浏览
0 Comments

在AngularJS中，如何访问触发事件的元素？

我在我的网页应用中同时使用了Bootstrap和AngularJS。但是我在让这两者协同工作时遇到了一些困难。

我有一个元素，它带有属性：data-provide="typeahead"

当用户在该字段中输入时，我希望更新data-source属性。函数updateTypeahead被正确触发，但是我无法访问触发事件的元素，除非我使用$('#searchText')，这是使用jQuery的方式，而不是AngularJS的方式。

如何让AngularJS与旧的JS模块协同工作的最佳方法是什么？

0

3 答案

0 Comments

在AngularJS中，如果要访问触发事件的元素，一般的方式是编写一个指令并将其绑定到所需的事件上。以下是一个示例指令：

app.directive('myChange', function() {
  return function(scope, element) {
    element.bind('change', function() {
      alert('change on ' + element);
    });
  };
});

或者使用DDO格式（根据下面评论中的建议）：

app.directive('myChange', function() {
  return { 
    link:  function link(scope, element) {
      element.bind('change', function() {
        alert('change on ' + element);
      });
    }
  }
});

以上指令可以如下使用：

在文本框中输入内容，然后离开/失去焦点，change回调函数将被触发。在这个回调函数中，可以通过`element`变量访问元素。

一些内置的指令支持传递`$event`对象，例如`ng-click`、`ng-Mouse*`。但是需要注意的是，`ng-change`不支持该事件。尽管可以通过`$event`对象获取元素：


$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...
}

这种方法违反了“Angular方式” -- Misko。

虽然这种解决方法基本上可以工作，但它没有使用DDO格式，这样很难弄清楚如何添加/传递作用域到绑定中。从你的示例中，没有简单的方法来添加一些DDO语法糖来进行作用域限定，这似乎与从ng-click传递$event一样违背了“Angular方式”。事实上，在官方的Angular文档和示例代码中，我找不到任何一个与你的语法相似的示例（即只返回一个匿名函数而没有任何DDO的指令）。

随着时间的推移，我越来越相信“Angular方式”被过度设计和过于复杂化。

0
0 Comments

在AngularJS中，有一个问题是如何访问触发事件的元素。通常情况下，我们可以使用updateTypeahead(this)来调用一个函数，并将this作为参数传递给它。然而，这种方式并不会将DOM元素传递给该函数。在这种情况下，this将指向作用域对象，而不是DOM元素。

如果想要访问DOM元素，可以使用updateTypeahead($event)来传递事件对象作为参数。在回调函数中，可以通过event.target来获取DOM元素。

然而，需要注意的是，ng-change指令不允许将$event作为变量传递。这意味着无法在ng-change中直接使用$event来获取事件对象。

同样地，ng-style和ng-class指令似乎也不支持传递事件对象作为参数。在ng-class中使用$event将得到undefined的结果。

可能是由于ng-change不会转换为真实的浏览器事件，因此无法使用$event来传递参数。这也解释了为什么ng-change不支持以$event的形式传递参数。

总之，以上提到的方法在解决AngularJS中如何访问触发事件的元素的问题时并不完全有效。因此，我们需要寻找其他的解决方案。

0
0 Comments

在AngularJS中，当我们想要访问触发事件的元素时，我们可以通过编写事件处理函数，并将事件绑定到元素上来实现。

首先，在HTML中，我们可以通过ng-focus指令来绑定一个事件处理函数，代码如下：

ng-focus="myfunction(this)"

然后，在JavaScript文件中，我们可以定义相应的事件处理函数，代码如下：

$scope.myfunction = function (msg, $event) {
    var el = event.target;
    console.log(el);
}

这样，当元素获得焦点时，ng-focus事件将触发myfunction函数，并将事件对象传递给该函数。在函数内部，我们可以使用event.target来获取触发事件的元素，并进行后续操作。

然而，上述方法返回的是作用域对象，并不能直接获取到触发事件的元素。因此，这种方法无法满足需求。

为了解决这个问题，我们可以在HTML中为元素添加自定义属性（例如id），并在事件处理函数中使用event.target来获取该属性的值。代码如下：

alert(event.target.id);

这样，我们就可以通过ng-change事件触发的函数中访问到触发事件的元素，并使用其属性值进行后续操作。

0