accessing angularjs from javascript or else

Question

I am learning angularjs and a bit confused. I am creating an angular module and controller functions like this:

    var mapApp = angular.module("mapApp", []);

    mapApp.controller("mapController", function($scope) {

        $scope.save = function() {
            //do domething
        };
    });

And I have other functions out of the controller.

    function onMapClickEvent(e) {
             //do domething
    }

When map clilcked, I want to populate angular save function. Is this possible.

I asked this because sometimes we need to work with more then one API. AngularJS and Google Maps API. One API function need to populate other API.

Answer 1

You can cast DOM element to Angular element in this way:

angular.element(DOM)

And get the current scope of DOM by invoking scope()

angular.element(DOM).scope()

Then you can access any member of this scope, in your example: save()

I implemented a simple example, you could try it:

HTML

<div ng-controller="myCtrl">
  <button id="testBtn" onclick="onClick(this)">test</button>
</div>

JS

angular.module("app",[])
.controller("myCtrl",function($scope){
  $scope.angularWorldFunction = function(){
    console.log("message from angular world");
  }
});

function onClick(target){
  angular.element(target).scope().angularWorldFunction();
}

Here is jsFiddle demo

Hope this helpful.