CODEWITHSUNDEEP
angularjs
Ankit Pandey
Ankit Pandey

Reputation: 650

$rootScope is not working in directive template

I am making a directive for promotion and I am getting a strange problem-
In below code there is a variable called scope.promoDetailUrl, When I and taking $rootScope.configData['PROMOTIONS'] data into scope.promoDetailUrl variable then this is working fine in directive template.

But if I am using configData['PROMOTIONS'] in template then this is not working.

Please see my code-

(function(){

'use strict';

angular.module('promotions', [])
    .directive('promotion', ['$interval', '$rootScope','HttpServiceCall', promotion])


function promotion($interval, $rootScope, HttpServiceCall){
    return{
        restrict:'EA',
        templateUrl: 'partials/directive-templates/promotion-template.html',
        replace:true,
        scope:{
            list:'='
        },
        compile: function(){
            return{
                post: function postLink(scope, iElement, iAttrs) {
                    console.log("listDirective",scope.list,$rootScope)
                    var startData = moment(scope.list.StartDate); 
                    var endDate = moment(scope.list.EndDate); 
                    scope.diff = {};
                    scope.list.image = environments[env].RESOURCE_URL_AMAZON + environments[env].AMAZON_PROMOTION_FOLDER_PATH + scope.list.image;
                    scope.promoDetailUrl = $rootScope.configData['PROMOTIONS'];
                }
            }
        }
    }
}

}())

<div class="col-xs-12 col-sm-4 promotion-pro" ng-show="isHMSisZero === 'false'">
<div class="pro-other-option-box">
    <figure ng-attr-title="{{list.altTag}}"><img ng-src="{{list.image}}"></figure>
    <div>
        <h3>{{list.title}}</h3>
        <p>{{list.shortDescription}}</p>
        <div class="timer-section clearfix">
        <!-- <p><a href="{{list.moreInfo}}">{{'link_more_info' | translate}}</a></p> -->
             <!-- not working -->
        <p><a href="#/{{configData['PROMOTIONS']}}/{{list.promoID}}">{{'link_more_info' | translate}}</a></p>
        <div class="pro-option-timer">
        <div class="timer-current">
            <strong>{{'promo_list_offer_text' | translate}}</strong>
            <span class="time-detail"><span ng-show="diff.days>0">{{diff.days}} {{'promo_list_days' | translate}} </span> <span ng-show="isHMSisZero === 'false'">{{diff.hours}} : {{diff.minutes}} : {{diff.seconds}}</span></span>
        </div>
        </div>
    </div>
    </div>
</div>

Upvotes: 1

Views: 302

Answers (1)

Matthew Cawley
Matthew Cawley

Reputation: 2818

You should be able to use $root to refer to the $rootScope in your view as follows:

<p><a href="#/{{ $root.configData['PROMOTIONS'] }}/{{list.promoID}}">{{'link_more_info' | translate}}</a></p>

Upvotes: 2

Related Questions