angular js: accessing $scope from jQuery

Question

There are several questions like this in stackoverflow. I know. Tried all the answers, but still no luck. My html :

    <div class="headline" id="headline-game">
        {{gameContent.headline}}
    </div>

jQuery:

    var country = $("#headline-game").scope().headline;
    alert(country);

But I got undefined, instead of my scope. Can anyone help me? I don't wanna change the scope, just accessing it.

Answer 1

Angular adds a global angular variable to your window.

So you can do something like this:

angular.element("#headline-game").scope().gameContent.headline;

Answer 2

The issue is caused by the order in which the plugins are initialized.

1. jQuery
2. AngularJS

So accessing scope() in a jQuery script on document load will result in undefined, since jQuery is run before Angular.

The solution to this is to let AngularJS execute jQuery once it is ready, using directives.

Example :

Controller

app.directive("myDirective", function() {
        return {
            restrict: "A",
            scope: {
                customheadline: "@"
            },
            link: function(scope, elem, attrs) {
                var country = scope.customheadline;
                alert(country);
            }
        }
    });

HTML

<div class="headline" id="headline-game" my-directive customheadline="{{ gameContent.headline }}">
    {{gameContent.headline}}
</div>