事件偵聽與一個角指令上<video> element.on不會觸發

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>