CODEWITHSUNDEEP
videoangularjsvideo.js
Tules
Tules

Reputation: 4915

Using video.js in angular.js directive

This directive is supposed to watch for changes in the scope.tutorialNumber variable (which increases as the user progresses through tutorials) and then load the new video by using tutorialNumber as an index on the array videoURLs, which then replace the first one which is hardcoded into the html. However the $watch doesn't seem to get triggered at all when tutorialNumber is updated. Why?

<video data-setup="{'techOrder': ['html5', 'flash']}"  class="video-js vjs-default-skin" id="myvideo" video-loader="tutorialNumber" id="video" controls>
    <source type="video/mp4" src="file:///C:/Users/Dell/Desktop/grammar%20game/ㅗㅏregular.mp4"></source> 
    Your browser does not support the video tag.
</video>

.directive('videoLoader', function(){
    return function (scope, element, attrs){
            scope.$watch(scope.tutorialNumber, function(){          
                //element.load();           
                scope.video.src(scope.videoURLs[scope.tutorialNumber]);
                scope.video.ready(function(){
                scope.video.play();
                $(scope.video).bind('ended', function(){
                    $(scope.video).unbind('ended');
                    if (!scope.video.ended) {
                        return;
                    }
                    scope.tutorialNumber++;
                    scope.$apply();
                    scope.loadFromMenu();
                });
            });
        });
    }
});

Upvotes: 0

Views: 4032

Answers (2)

Paul Kane
Paul Kane

Reputation: 111

Am I reading this wrong, or are your scope references written wrong?

You have scope listed in most cases, but the common Angular reference is $scope.

Also, there is such a thing as $rootScope. You can utilize $rootScope to return values to the parent of the application (model) and then utilize $scope inside directives or modules to compartmentalize the data.

Upvotes: 0

Stewie
Stewie

Reputation: 60416

You should write your $watch expression as:

scope.$watch('tutorialNumber', function(){ ...

or

scope.$watch(function(){return scope.tutorialNumber;}, function(){ ...

Upvotes: 1

Related Questions