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

angular way 将是一个自定义指令：

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>

在angular指令中<video>上的element.on的eventlistener不会触发</video>

1 个答案: