Given this simple Angular module:

angular.module('fixturesModule', [])
.directive('clubfixtures', function () {
    "use strict";
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            club : "@club",
            max : "@max"
        },

    templateUrl: "ClubResultsTemplate.html",

    controller: function ($scope, $http) {

        $http.get("data.json").success(function (data) {
            $scope.results = data;
        });

        $scope.sortBy = "Date";

    }
}
});

How do I access club and max in the controller function?

Thanks, Jeff

Given this simple Angular module:

angular.module('fixturesModule', [])
.directive('clubfixtures', function () {
    "use strict";
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            club : "@club",
            max : "@max"
        },

    templateUrl: "ClubResultsTemplate.html",

    controller: function ($scope, $http) {

        $http.get("data.json").success(function (data) {
            $scope.results = data;
        });

        $scope.sortBy = "Date";

    }
}
});

How do I access club and max in the controller function?

Thanks, Jeff

• javascript
• angularjs

• 1 In which controller function? In the controller function for the directive? Or in the controller function for the parent of the directive? – Ben Lesh Commented Nov 1, 2012 at 17:04
• In the function($scope, $http) assigned to controller shown in the example above. Specifically the club value will form part of the path in the $http.get – jeffeld Commented Nov 1, 2012 at 17:25

2 Answers 2

Attributes on the scope set up with '@', as in scope: { myAttr: '@' } receive their values after the controller function has been called.

You can demonstrate this with a simple setTimeout - See http://jsfiddle/Q4seC/ (be sure to open the console)

$attrs, as you've found, is ready when you need it.

Interestingly, if you use '=' instead of '@', the value is ready and available, which makes me think this could be considered a bug in Angular...

The 2 mentioned variables (max and club) will be simply defined in a scope injected to directive's controller. This means that you can write:

controller: function ($scope, $http) {

        $scope.max; //do sth with $scope.max
        $scope.club //so sth with $scope.club

        $http.get("data.json").success(function (data) {
            $scope.results = data;
        });
}

in your directive's controller.

If you want to read up more I would suggest the "Directive Definition Object" in the http://docs.angularjs/guide/directive where it talks about scopes in directives.