Question

我正在制定促销指令，我遇到了一个奇怪的问题 -
在下面的代码中有一个名为 scope.promoDetailUrl 的变量，当我将 $ rootScope.configData [＆＃39; PROMOTIONS＆＃39;] 数据带入 scope.promoDetailUrl 变量时，这在指令模板中正常工作。

但如果我在模板中使用configData [＆＃39; PROMOTIONS＆＃39;]，那么这不起作用。

请参阅我的代码 -

(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>

Answer 1

您应该可以使用$root在视图中引用$rootScope，如下所示：

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

$ rootScope在指令模板中不起作用

1 个答案: