AngularJS 控制器中函数的 AddEventListener答案

【问题标题】：AddEventListener of function inside an AngularJS controllerAngularJS 控制器中函数的 AddEventListener
【发布时间】：2018-06-18 18:32:03
【问题描述】：

这是我的问题：我必须向DOM object 添加一个事件侦听器，并将其绑定到AngularJS function 的控制器内的一个函数。

代码如下：

HTML

<body ng-app="myApp">
  <div ng-controller="myController">
    <table>
      <ul id="main_ul">
      </ul>
    </table>
  </div>
</body>

JS

var day = document.createElement('li');
day.innerHTML = 'Click Here';
day.myDate = new Date();
document.getElementById('main_ul').appendChild(day);
day.addEventListener("click", onClickAgenda, false);

AngularJS

var module = angular.module('myApp', []);
module.controller('myController', function($scope) {
    function onClickAgenda() {
        $scope.selectedDate = this.myDate;
    }
});

我收到函数onClickAgenda() 未定义的错误。

我知道这可以通过将函数声明为来解决：

function onClickAgenda() {
  console.log(this.myDate);
}

在我的 JS 文件中。但我需要它在控制器内部。这可能吗？

【问题讨论】：

标签： javascript angularjs dom

【解决方案1】：

您可以对选择框使用 ng-options 并使用范围数组填充选项。

ng-options

那么你应该在元素上使用 ng-click 而不是 addEventListener https://docs.angularjs.org/api/ng/directive/ngClick

ng-options 仅适用于选择框（我给出了错误的答案）

对于您的情况，您可以在范围数组上使用ng-repeat，并从控制器动态地将项目推送到数组。

<ul id="main_ul" ng-repeat="listItem in collection">
   <li ng-click="handlerFunction()">{{listItem}}</li>
</div>

【讨论】：

我已经考虑过了，但是我需要在 DOM 对象上动态添加属性。我怎么能用ng-click 做到这一点？