I've set the following watcher in my controller:

var embeds = {twitter: false, facebook: false};

$scope.$watch(embeds, function(newVal, oldVal) {
    if(embeds.twitter && embeds.facebook) $scope.loading = appLoader.off();
});

This should fire when embeds changes. I have the following functions that check if all my embedded Tweets and Facebook posts have loaded for the page. When all Tweets or Facebook posts are loaded, it updates embeds within a $timeout block in order to trigger a digest cycle.

checkFBInit();

twttr.ready(function(twttr) {
    twttr.events.bind('loaded', function(event) {
        $timeout(function() {
            embeds.twitter = true;
        });
    });
});

function checkFBInit() {
    // Ensure FB.init has been called before attempting to subscribe to event
    var fbTrys = 0;
    function init() {
        fbTrys++;
        if (fbTrys >= 60) {
            return;
        } else if (typeof(FB) !== 'undefined') {
            fbTrys = 60;
            FB.Event.subscribe('xfbml.render', function() {
                $timeout(function() {
                    embeds.facebook = true;
                });
            });
            return;
        } else {
            init();
        };
    };
    init();
};

The problem I'm having is that my watcher only fires once when I set it. I've tried binding embeds to $scope and/or watching embeds.twitter and embeds.facebook but the watcher only ever fires once.

I've set the following watcher in my controller:

var embeds = {twitter: false, facebook: false};

$scope.$watch(embeds, function(newVal, oldVal) {
    if(embeds.twitter && embeds.facebook) $scope.loading = appLoader.off();
});

This should fire when embeds changes. I have the following functions that check if all my embedded Tweets and Facebook posts have loaded for the page. When all Tweets or Facebook posts are loaded, it updates embeds within a $timeout block in order to trigger a digest cycle.

checkFBInit();

twttr.ready(function(twttr) {
    twttr.events.bind('loaded', function(event) {
        $timeout(function() {
            embeds.twitter = true;
        });
    });
});

function checkFBInit() {
    // Ensure FB.init has been called before attempting to subscribe to event
    var fbTrys = 0;
    function init() {
        fbTrys++;
        if (fbTrys >= 60) {
            return;
        } else if (typeof(FB) !== 'undefined') {
            fbTrys = 60;
            FB.Event.subscribe('xfbml.render', function() {
                $timeout(function() {
                    embeds.facebook = true;
                });
            });
            return;
        } else {
            init();
        };
    };
    init();
};

The problem I'm having is that my watcher only fires once when I set it. I've tried binding embeds to $scope and/or watching embeds.twitter and embeds.facebook but the watcher only ever fires once.

• javascript
• angularjs
• angularjs-watch

Share Improve this question Follow asked Mar 5, 2016 at 18:43 Daniel BonnellDaniel Bonnell 5,00799 gold badges5151 silver badges9292 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Use:

$scope.embeds = {twitter: false, facebook: false};
$scope.$watch('embeds', function(newVal, oldVal) {
    if ($scope.embeds.twitter && $scope.embeds.facebook) {
        $scope.loading = appLoader.off();
    }
}, true);

See https://docs.angularjs/api/ng/type/$rootScope.Scope. First argument must be string or function which return the name of param.