How to get component's controller's scope from animation?

Question

I've got a component with an animation defined as such:

angular
    .module('slider')
    .component('slider', {
        templateUrl: '/mytemplate.html',
        controller: function SliderController() {
            var self = this;
            self.direction = 'left';
        }
    })
    .animation('.slide-animation', function() {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope();
                // The line below logs undefined???
                console.log(scope.direction);
            }
        };
    });

I'm trying to access a value from the controller's scope but it's being returned as undefined which leads me to believe I've got the wrong scope. Is that correct? How can I get the controller's scope from within the animation?

Did you try this? http://stackoverflow.com/a/13744085/277106 — Genti Saliu, Oct 15 '16 at 21:31
Thanks! Using that I was able to get the scope by doing element.scope().$ctrl — Ryan, Oct 15 '16 at 22:06

score 1 · Accepted Answer · answered Oct 16 '16 at 03:02

I was able to get the scope I was looking for with help from Genti's comment.

angular
    .module('slider')
    .component('slider', {
        templateUrl: '/mytemplate.html',
        controller: function SliderController() {
            var self = this;
            self.direction = 'left';
        }
    })
    .animation('.slide-animation', function() {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope().$ctrl;
                console.log(scope.direction);
            }
        };
    });

How to get component's controller's scope from animation?

1 Answers1