CODEWITHSUNDEEP
javascriptjqueryangularjs
ishwr
ishwr

Reputation: 745

angular js: accessing $scope from jQuery

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.

Upvotes: 12

Views: 30398

Answers (4)

hieuvt
hieuvt

Reputation: 11

Assume the model value is return from a $http request.

In the controller you have 3 functions:

function getGameContentSuccessCallback(){
   doSuccessCallback();
}

function getGameContentErrorCallback(){
  doSth()
}

function getGameContent(){
  GameContentService.GetGameContent(submitData,getGameContentSuccessCallback,getGameContentErrorCallback)

}

then you define doSuccessCallback in jQuery

var doSuccessCallback = function(){   
   var country  = angular.element("#headline-game").scope().gameContent.headline;   
   alert(country );   
}

Upvotes: 0

Jimmy
Jimmy

Reputation: 2821

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>

Upvotes: 2

hjgraca
hjgraca

Reputation: 1714

Angular adds a global angular variable to your window.

So you can do something like this:

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

Upvotes: 14

Jay Shukla
Jay Shukla

Reputation: 5826

Try this

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

Upvotes: 0

Related Questions