How to trigger some javascript function in AngularJS?

Question

I have just started my first angular.js project and have a situation where a user clicks a button which sets a value on my model but what I also need now is the the html video element to have it's currentTime property set to a value and the video that is currently playing to pause.

So what I need is

1) Update my model (which I have done via ng-click)

2) Run some javascript which does

{
    $('videoElement')[0].currentTime = time (from my model);
     $('videoElement')[0].pause();
}

I am not sure where this second step should be triggered from and how?

Mark Rajcok · Accepted Answer · 2012-12-22 17:16:34Z

1

You should use a directive to do DOM manipulation. Hopefully your videoElement is in the same scope as your button. If so, define a directive that $watch()es your model:

angular.module('myModule', [])
.directive('pauseVideo', function() {
   return {
      scope: { someProperty: '@pauseVideo' },
      link: function(scope, element, attrs) {
        scope.$watch('someProperty', function(value) {
          var videoElement = $('videoElement')[0];
          videoElement.currentTime = time(value);
          videoElement.pause();
        })
      }
   }
})

Add the scope property to the HTML element where videoElement is used. E.g., if the property you manipulate with ng-click is $scope.someProperty:

<div id="videoElement" pause-video="someProperty">

If the videoElement is not in the same scope as the button, you could put the code on your controller, knowing this goes against the "Angular way", but feeling satisfied that you have it working: :)

<a ng-click="pauseVideo()">pause video</a>

In your controller:

$scope.pauseVideo = function() {
    $scope.someProperty = ...;
    var videoElement = $('videoElement')[0];
    videoElement.currentTime = time (from my model);
    videoElement.pause();
}

answered Dec 22, 2012 at 17:16

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JD. Over a year ago

Thank you so much Mark. My first go at angular so it was hard to work out where to start.

Collectives™ on Stack Overflow

How to trigger some javascript function in AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related