Changing scope in event handler in Angular directive

Question

I need to dynamically change some scope variables after song in audio tag is finished. My problem is that scope.test is not affected by audio directive.

angular.module('playItApp', [])

    .controller('audioController', ['$scope', function($scope){
        $scope.test = 'songNotFinished';
    })

    .directive('audio', function(){
        return {
            restrict: 'E',
            link: function(scope, element, attrs){
                element[0].onended = function() {
                    scope.test = 'songFinished';
                    this.load();
                };
            }
        }
    });


<div ng-controller="audioController">
    <h1>{{ test }}</h1>
    <audio controls autoplay>
        <source ng-src="{{ some_path }}" type="audio/mpeg">
    </audio>
</div>

Mark Pieszak - Trilon.io · Accepted Answer · 2015-03-19 19:03:17Z

3

You just need tell the directive which part of the scope needs two-way binding. Which means it binds from your parent scope, and also communicate back to your controller that something in the scope has changed with scope.$apply(function () { /* what's changing */ });

.directive('audio', function(){
    return {
        restrict: 'E',

        scope: {
            'test' : '=' // Two-way binding <--

            // There are three options here when you're dealing with scope
            //    @ --> Attribute string binding
            //    & --> Callback method binding
            //    = --> Two-way model binding
        },

        link: function(scope, element, attrs){
            element[0].onended = function() {

                // Make sure to call an anonymous function inside of .$apply
                scope.$apply(function () { 
                    scope.test = 'songFinished';
                });

                this.load();
            };
        }
    }
});

edited Mar 19, 2015 at 19:03

answered Mar 19, 2015 at 18:31

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

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

2 Comments

klis87 Over a year ago

Actually problem was more complicated, I needed scope.$apply(); at the end of link function in directive.

Mark Pieszak - Trilon.io Over a year ago

@user3575996 Added the scope.$apply(function () {}); almost forgot you need to communicate back to the controller!

Collectives™ on Stack Overflow

Changing scope in event handler in Angular directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related