在角度指令中打开 element.on 的事件侦听器<video>不会触发

Question

如果我在指令链接函数中使用这样的东西：

var vdo = element.find('video')[0];
vdo.on('loadstart', function () {
   console.log('onloadstart');
});

代码未执行。相反，我必须使用：

vdo.onloadstart = function() {
  console.log('onloadstart');
};

或

vdo.addEventListener('loadstart', function () {
  console.log('onloadstart');
});

有人能解释一下原因吗？使用addEventListener是否有问题？

Answer 1

角度方式将是一个自定义指令：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
  $scope.src = 'w3schools.com/html/mov_bbb.mp4';
    $scope.myFunc = function() {
      alert('loadstart!');
    };
}
myApp.directive('onLoad', function() {
  return {
    restrict: 'A',
    scope: {
      func: '&onLoad'
    },
    link: function(scope, element) {
      element.on('loadstart', function() {
        scope.func();
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <video controls on-load="myFunc()">
    <source ng-src="{{src}}">
  </video>
</div>