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 :

    


        
                      

              相关标签:
       
      

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>

Answer 3

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 );   
}

Answer 4

Try this

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