AngularJS Directive - Access $rootScope variable in template

Question

I have one function defined in $rootScope which has some value. I have created one directive to show value from there. I am not getting any value there.

<last-data-update-message type="info" update-for='stats'></last-data-update-message>

$rootScope.Helpers = {
getLastUpdateStatus: function(type) {
    if (!_.isEmpty(Helpers.lastUpdateDetails)) {
        if (type == 'requests') {
            return Helpers.lastUpdateDetails.last_request_generated;
        } else if (type == "stats") {
            return Helpers.lastUpdateDetails.last_stats_executed || ((new Date()).getTime() - 2 * 60 * 60 * 1000);
        } else if (type == "response") {
            return Helpers.lastUpdateDetails.last_response_recieved;
        } else {
            return Helpers.lastUpdateDetails.last_stats_executed || ((new Date()).getTime() - 2 * 60 * 60 * 1000);
        }

    }
  }
}
mymodule.directive('lastDataUpdateMessage', ["$rootScope", '$compile', function($rootScope, $compile) {

    return {
        restrict: 'AE',
        replace: true,
        template: function(element, attrs) {
            if (element && element[0]) {
                var targetElem = element[0];
                console.log(attrs)
                console.log("type", attrs.type)
                console.log("for", attrs.updateFor);
                console.log(attrs.updateFor);

                return '<div class="alert alert-info fade in margin-0" style="margin-top:10px !important">' +
                    '<i class="fa-fw fa fa-info"></i>' +
                    '<strong>Information!</strong> The below report relies on data that is computed in batch. The computaitons were last updated about <span am-time-ago="$rootScope.Helpers.getLastUpdateStatus(' + attrs.updateFor + ')"></span>.' +
                    '</div>';
            }
        },
        link: function(element) {

        }
    }

Any help will be appreciated.

Answer 1

Few Mistakes in your code. 1) You can't access Any angular variable in dom. :) 2) if a function defined on $rootScope or $scope, if called from dom by interpolation, then in function argument you can pass only those variable which are defined on $scope not Attrs, which is second mistake. :)

I have just little modified your code to make it work.

Please modified the return statement, based on your requirement.

Hope, I was able to answer your question. :)

app.directive('lastDataUpdateMessage', ['$rootScope', '$compile', function ($rootScope, $compile) {

    return {
        restrict: 'AE',
        replace: true,
        template: function (element, attrs) {
            if (element && element[0]) {
                return '<div class="alert alert-info fade in margin-0" style="margin-top:10px !important">' +
                    '<i class="fa-fw fa fa-info"></i>' +
                    '<strong>Information!</strong> The below report relies on data that is computed in batch.'+
                    'The computaitons were last updated about <span>{{Helpers.getLastUpdateStatus()}}</span>.' +
                    '</div>';
            }
        },
        link: function (scope, element, attrs) {
            scope.type = attrs.updateFor;
            scope.Helpers = {
                getLastUpdateStatus: function () {
                    if (scope.type == 'requests') {
                        return 'requests';
                    } else if (scope.type == "stats") {
                        return "stats Test";
                    } else if (scope.type == "response") {
                        return "response";
                    } else {
                        return "OOPS! Type is empty";
                    }
                }
            }
        }
    }

}])