Attribute undefined in custom directive in angularjs

Question

I am creating a custom directive in angularjs, but for some attributes i am receiving undefined value.

function processinfo(ProcessInfoService, $timeout) {
        console.log("processInfo directive");
        return {
            restrict: 'E',
            scope: {
                start: '=',
                end: '=',
                uuid: '='
            },
            templateUrl: 'k2-modules/js/directives/templates/processInfoTemplate.html',
            controller: function($scope) {
                var self = this;
                console.log($scope.uuid);   // undefined
                console.log($scope.end);    // 164982555555
                console.log($scope.start);  // 0
                self.processData = ProcessInfoService.getInfo($scope.start, $scope.end);
            }
        }
    }

<processinfo start="0" end="164982555555" uuid="a57cf6f8"></processinfo>

For uuid I am getting undefined but for end and start values everything is working fine. I don't know why this is happening since syntax is same for all three. Any help will be appreciated

Answer 1

Your mixing directive syntax with component/controller syntax, in directives $scope is called scope (no dollar). Here's the correct syntax to build a angularjs directive:

angular.module('app').directive('myDirective', MyDirective);

MyDirective.$inject = ['$timeout'];

function MyDirective($timeout) {
    return {
        scope: {
            'propBinding1': '<',
            'propBinding2': '&'
        },
        replace: true,
        restrict: 'EA',
        templateUrl: 'path to html',
        link: function link(scope, element, attrs) {
            //... do stuff here ...
        }
    };
}