CODEWITHSUNDEEP
angularjs
Mathematics
Mathematics

Reputation: 7618

Why rootScope looses it's authority

I have a controller like this,

(function () {
    'use strict';

    angular.module('myControlleringApp').controller("myController", ['$rootScope', myController]);

    function myController($rootScope) {
        $rootScope.status = "loading";

        $("#myIFrame").attr('src', "Templates/myControllerViewer.aspx");
        $('#myIFrame').load(function ($rootScope) {
            // some other logic
            $rootScope.status = "loaded";
        });
    };
})();

It works perfectly when I move,

$rootScope.status = "loaded";

out of load method. but otherwise it doesn't changes state of my view.

Here is some of HTML

  <div id="myControlleringAppView" data-ng-app="myControlleringApp">
        <div class="spinner" data-ng-show="status=='loading'"></div>
        <div id="partialView" data-ng-show="status=='loaded'" data-ng-view="" ></div>
    </div>

Upvotes: 0

Views: 34

Answers (1)

Joe Clay
Joe Clay

Reputation: 35797

The $rootScope parameter in your load callback is masking the one you injected into your controller:

$('#myIFrame').load(function ($rootScope) { // Creates new variable in 
                                            // the callback's scope!
    $rootScope.status = "loaded"; // This is now referring to the callback's 
                                  // parameter, not the service.
});

So what you're effectively doing is this:

$rootScope.status = "loading";

$('#myIFrame').load(function (randomNewParam) {
    randomNewParam.status = "loaded"; // Not $rootScope!
});

It looks like you might be expecting $rootScope to get injected into your load callback - this isn't the case! According to the jQuery docs, the callback should take this form:

$('#myIFrame').load(function (event) {
    $rootScope.status = "loaded";
});

Note that now the parameter names have changed, the real $rootScope is available from the controller function's scope again - this will give you the functionality you're looking for! That said, as Dhaval Marthak mentioned in the comments, you really shouldn't be using $rootScope to pass values around your application - it's effectively the same as creating global variables. Services and dependency injection are the way to go.

Upvotes: 1

Related Questions