AngularJS: global access to function defined in a controller

Question

I have an angularjs app with some controllers.

At some point, I need to access a function defined inside a controller, but the place where the function is gonna be called is not inside the angularjs APP.

I'll try to build a simple scenario:

app.controller('TaskController', function ($scope, $routeParams, $window, TaskEngine, PortalUtil) {

$scope.closeTask = function() {
    $scope.openTask = false;
    $scope.openedTaskUrl = undefined;
}

});

-- Some other place in my web app, outside of the angular APP.

<button onclick="closeTask();">

The "closeTask()" function is never accessible, because its out of scope. I tried to define it in the window object

$window.closeTask = function() {
    $scope.openTask = false;
    $scope.openedTaskUrl = undefined;
}

});

Now, my function is visible, but the variables "openTask" and "openedTaskUrl" are not. Is it possible to do what I want? Basically, I have a controller, and I need to access one function anywhere, to control the behaviour of a menu.

Thanks!

user3707950 · Accepted Answer · 2014-06-12 02:53:02Z

1

I would not use $window for this. Instead, Angular has a nice feature which lets not Angular code to interact with it. Using Angular.element you can access data or functions defined in Angulars Scope.

 var $scope = angular.element(document.querySelector('[ng-app=app]')).scope();
 $scope.$apply(function() {
    $scope.print("Hello world"); 
 });

answered Jun 12, 2014 at 2:53

user3707950

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

Collectives™ on Stack Overflow

AngularJS: global access to function defined in a controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related