How to access a property of a service via a bound controller variable

Question

I'm attempting to access a property of a service via a bound controller variable, within a template, to no success.

Controller:

app.controller('VictoryController', function($scope, AlertStatisticsService) {
    $scope.AlertStats = AlertStatisticsService;
});

Service returns an object structured like this:

factory = {
    factionWins = {
        vs: 123,
        nc: 123,
        tr: 123
    }
}

The template is rendered as part of an Attribute directive:

app.directive('homeVictoryCard', function() {
    return {
        restrict: 'A',
        replace: true,
        scope : {
            empire: '@',
        },
        templateUrl: 'views/home/partials/victory.card.html'
    };
});

Which is called by the following HTML element:

<div home-victory-card empire="vs"></div>

In the template in question, I'm attempting to access the controller / service's object data via the empire variable, which is in scope of the template, like so:

{{ AlertStats.factionWins[empire] }}

I'm also trying to use it in various ng-hide and ng-shows, like:

ng-hide="AlertStats.factionWins[empire] > 0"

In Twig, I used to use attribute(AlertStats.factionWins, empire) to grab the information, but I don't know how to do it in Angular, and Google searches haven't returned anything useful.

Thanks in advance!

Syntax of snippets shown is all valid but snippets alone aren't complete enough to connect everything together. A simple demo that replicates problem would help — charlietfl
– charlietfl, Commented Jan 12, 2016 at 21:40
That being said ... EMPIRE doesn't appear to be a scope variable — charlietfl
– charlietfl, Commented Jan 12, 2016 at 21:43
Added with further information, it's within a directive scope. — Matt Cavanagh
– Matt Cavanagh, Commented Jan 12, 2016 at 21:56

Matt Cavanagh · Accepted Answer · 2016-01-12 22:16:58Z

1

Since you have directive with isolated scope it doesn't inherit scope from parent controller so AlertStats isn't in directive scope

You could inject the factory into directive or pass another scope variable as attribute to directive

Example injecting factory

app.directive('homeVictoryCard', function(AlertStatisticsService) {
    return {
        restrict: 'A',
        replace: true,
        scope : {
            empire: '@',
        },
        templateUrl: 'views/home/partials/victory.card.html',
        link:function(scope){
           scope.AlertStats = AlertStatisticsService
        }
    };
});

edited Jan 12, 2016 at 22:16

Matt Cavanagh

5186 silver badges19 bronze badges

answered Jan 12, 2016 at 22:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Cavanagh Over a year ago

Yes that fixed it! Thank you! I never knew you could inject into the directive's scope via that method.

charlietfl Over a year ago

Yes, can inject any service/factory or constant or provider ... simple example is $http

Collectives™ on Stack Overflow

How to access a property of a service via a bound controller variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related