2
\$\begingroup\$

Previously, I use to always navigate through the $parent $scopes in order to send or change data from one Controller into/in another. I then created my own ScopeFactory as a way to storing each Controllers $scope and then getting those scopes from other Controllers.

Having not experienced any problems with using this method, I'm just curious if this is a good way to do it.

.factory('ScopeFactory', [function() {

    var notifications  = { that: this };
    var tagsPanel      = { that: this };
    var activityHeader = { that: this };

    var saveScope = function(type, vs) {
        switch(type) {
            case 'notifications':
                notifications.that = vs;
                break;
            case 'tagsPanel':
                tagsPanel.that = vs;
                break;
            case 'activityHeader':
                activityHeader.that = vs;
                break;
        }
    };

    var getScope = function(type) {
        switch(type) {
            case 'notifications':
                return notifications.that;
                break;
            case 'tagsPanel':
                return tagsPanel.that;
                break;
            case 'activityHeader':
                return activityHeader.that;
                break;
        }
    };

    return {
        saveScope : saveScope,
        getScope  : getScope
    };
}]);

Saving a scope:

// inside activityHeader Controller:
ScopeFactory.saveScope('activityHeader', vs);

Getting a scope from another Controller:

var activityHeader = {};

activityHeader = ScopeFactory.getScope('activityHeader');
activityHeader.chosenTicker   = initTicker;
activityHeader.companyName    = compName;
activityHeader.currentPrice   = price;
activityHeader.currentPercent = percent;
activityHeader.initialTickerLoaded(ticker);
\$\endgroup\$
4
  • 3
    \$\begingroup\$ Personally, I think the best way to share scopes is to not do it at all. Any data that needs to be shared between controllers can and should be abstracted into services that maintain shared data. Controllers should be a dumb data-binding layer without any dependencies on other controllers. In my opinion, the very concept of sharing scopes is an antipattern. \$\endgroup\$ Apr 27 '15 at 8:57
  • \$\begingroup\$ Ah true... hmm that's a lot of new services/factories to create then in that pattern. Oh well I guess version 2.0 refactored hehe... So my way is sort of using a service to connect controllers. However a more better/separation of concerns way would be to have controllers communicate with connected services. \$\endgroup\$
    – Leon Gaban
    Apr 27 '15 at 18:17
  • 2
    \$\begingroup\$ The idea is that a single service should encapsulate a single functionality related to data management. So if you have information about the currently logged-in user and some functions to interact with it, put that in a service. If you need to control application settings, put that in a service. If you need to interact with an AJAX API, put that in a service. And so on and so forth. \$\endgroup\$ Apr 27 '15 at 20:23
  • \$\begingroup\$ Finally figured it out, will post an Answer as to how to accomplish this in the true Angular way soon \$\endgroup\$
    – Leon Gaban
    Nov 23 '15 at 4:08
1
\$\begingroup\$

I've finally refactored out the anti-pattern ScopeFactory out of my apps.

Instead I'm using $broadcast and $emit to accomplish what I'm trying to do, which is the more Angular way of doing this.


Example

Controller 1 (I $emit out the event and send a variable):

$rootScope.$emit("add.ticker.typing", word);

Controller 2 (I listen for the event and pick it up, including variables like objects or strings):

$rootScope.$on(
    "add.ticker.typing",
    function handleSearchTyping(event, word, option) {
        if (option != 'empty') {
            typingSearch(word);
        } else {
            $scope.tickersList       = [];
            $scope.tickersListLoaded = false;
        }
    }
);

Now with this, now only is it a true Angular pattern, but I'm not sending giant Controller $scope objects all around my app.

\$\endgroup\$
1
  • \$\begingroup\$ Good. Now it's better \$\endgroup\$
    – Zorgatone
    May 18 '16 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.