Getting access to angular $scope from own event

Question

$I have a custom javascript object, that can fire events. I would like to access the angular $scope inside the event-handler, but I have read somewhere that using angular.element(...).scope() is not good, because it's only meant for testing.

My other idea was to register the handle on my object inside the controller, but this is not working (looks like $scope.somevalue gets set, but I don't think $scope is the same object).

I have found many answers here on Stack Overflow for similar questions, but they all seem to be using directives. All I want is to get a value from the object when it's updated, and display it.

Here are the two ways I have tried.

var myObj = GetMyObjInstance();

// Working, but apparently it's not good practise to call .scope() on an element.
myObj.onUpdated = function(){
    console.log("myObj updated");
    var v = myObj.getValue();
    var controllerDiv = document.getElementById("controller");
    var $scope = angular.element(controllerDiv).scope();

    $scope.apply(function(){
       $scope.someValue = v; 
    });
}

// Tried to do this, thinking i would get closure on the scope.
angular.module('myApp', []).controller('controller', function($scope){
   myObj.onUpdated = function(){
       console.log("myObj updated"); // Gets logged to console...
       var v = myObj.getValue();
       $scope.somevalue = v; // ... but somevalue does not get displayed. 
       $scope.apply(); // Error, says it's not a function, so maybe this is not the right object?.
   } 
});

Try $scope.$apply() instead of $scope.apply(). But nevertheless, you should try to use directives and/or components. — Tomek Buszewski
– Tomek Buszewski, Commented Apr 8, 2016 at 12:22
please console.log(v) and check it. If it is ok just change $scope.apply(); to $scope.$apply(); — ahmetugurbulut
– ahmetugurbulut, Commented Apr 8, 2016 at 12:33

georgeawg · Accepted Answer · 2016-04-08 12:32:39Z

1

Use AngularJS directives to handle events and update scope.

app.directive("xdEvent", function() {
    return linkFn(scope, elem, attrs) {
        elem.on("event", function(e) {
            scope.$eval(attrs.xdEvent, {$event: e});
            scope.$apply();
        });
    };
};

USAGE

<div xd-event="fn($event)"></div>

answered Apr 8, 2016 at 12:32

georgeawg

49k13 gold badges77 silver badges98 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:00:40Z

0

I think using a Service instead of a controller is a better practice. You can call a service from outside javascript with the injector like explained in this thread : Call angularjs service from simple js code

If it is still important for you to access this variables from controller, you can use $watch to tell your controller to update itself when the service variables change.

Hope this help.

A+

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Apr 8, 2016 at 12:53

Oreste Viron

3,7954 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Getting access to angular $scope from own event

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related