AngularJS : Call controller function from outside with vm

Question

Here I have :

var app = angular.module('app');
app.controller("myController", function () {
        var vm = this;
        vm.myFunction = function() { alert('foo'); };
});

app.animation('.animate', ["$timeout", function($timeout) {
      var vm = this;
      return {
        addClass: function(element, className, doneFn) {
            $timeout(function() {
                console.log('this is displayed');
                vm.myFunction(); // Doesn't work !
            });
        }
      }
}]);

When I add a class in the template, addClass gets fired. However, vm.myFunction() doesn't, because it does not exist.

How do we do this in angular ?

what kind of syntax for a controller this is... where is the controller name? — Banik
– Banik, Commented Mar 2, 2016 at 6:57

user5259186 · Accepted Answer · 2016-03-02 07:12:12Z

0

Some different from yours but I thought this can help you...

in HTML

<div id="outer" ng-controller="myController"></div>

in JS

var app = angular.module('app');
app.controller('myController', function ($scope) {

 $scope.myFunction = function() { alert('foo'); };

});

var scope = angular.element($("#outer")).scope();
scope.myFunction();

answered Mar 2, 2016 at 7:12

user5259186

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

2 Comments

lapin Over a year ago

I actually found the same answer here : stackoverflow.com/questions/23887872/… and that did the trick ! Thanks !

Shashank Over a year ago

Although getting the scope by hack, will do, but this is not the best practice that one should followed. If one needs to call the function, then why shouldn't one make use of angular in pure. There are many in it like -> providers, services, factory, etc. which does the job. In your case, it is recommend to make use of either of these.

Shashank · Accepted Answer · 2016-03-02 06:57:48Z

0

Modify your code as the following:

var app = angular.module('app');
app.controller('myController', function ($scope) {
        var vm = this;
        vm.myFunction = function() { alert('foo'); };
        $scope = vm;
});

app.animation('.animate', ["$timeout", 'myController', function($timeout, myController) {
      var vm = myController;
      return {
        addClass: function(element, className, doneFn) {
            $timeout(function() {
                console.log('this is displayed');
                vm.myFunction(); // Doesn't work !
            });
        }
      }
}]);

answered Mar 2, 2016 at 6:57

Shashank

2,1002 gold badges21 silver badges40 bronze badges

3 Comments

lapin Over a year ago

Thanks for answering ! I did your changes, but I got the following error : "Error: [$injector:unpr] Unknown provider: myController <- myController <- .animate-animation"

lapin Over a year ago

Maybe this is because "Attempting to inject one controller into another will also throw an Unknown provider error" from docs.angularjs.org/error/$injector/unpr

Shashank Over a year ago

Since you haven't shared the demo of your code, it was impossible for me to check and verify the same. You can check in my answers, I most of the time support my code with a working demo. it might have created issue due to some missing module or error.

Collectives™ on Stack Overflow

AngularJS : Call controller function from outside with vm

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related