I created a custom directive that handles the visibility of text elements on a webpage. While this logic works correctly half of the time, it fails the other half of the time. Here is the code snippet from my directive:
newco.directive 'heroHeadline', ($routeParams, $interpolate, $rootScope, paramsStateService) ->
restrict: 'E'
templateUrl: '/pages/shared/hero_headline'
scope:
marquee: "="
link: (scope, el, attrs) ->
scope.displayInternationalCopy = false
scope.displayHeadline2 = false
if paramsStateService.customerCategoryId is 'international'
scope.displayInternationalCopy = true
else
classification = $routeParams.classification
classification ?= 'us'
doubleHeadlineClassifications = ["latino", "us"]
scope.displayHeadline2 = if classification in doubleHeadlineClassifications then true
console.log(scope.displayInternationalCopy)
This is the template used:
p.uppercase(ng-if="!displayInternationalCopy")
| Dishworld is now Sling International
h1.invert
span.copy The #1 International
span.copy TV Service in the U.S.
p Sign up today for as low as $25/mo. (and sometimes lower!)
h1#marquee-headline-1.invert ng-if="displayInternationalCopy"
interpolate(value="{{ marquee.headline1 | heroHeadline | perMonth }}" params="basePack")
h2#marquee-headline-2 ng-hide="displayHeadline2 "
interpolate(value="{{ marquee.headline2 | heroHeadline | perMonth }}" params="basePack")
| {{displayHeadline2}}
Even though the console.log shows displayInternationalCopy as false, the top part of the template still renders. On the contrary, when displayInternationalCopy is true, it displays correctly. This particular pattern has been utilized successfully in various parts of the application, which makes this issue puzzling.
Here's how the directive appears in the view:
section.jumbotron#international style="background-color: #000" ng-class="{lefty: isDomestic, white: !isDomestic }"
img#hero.hidden-xs height='616' src="{{ marquee.heroImage }}"
.p ng-class="{hero_gradient: !isDomestic}"
.transbox.visible-xs
.copy-international
.container-fluid
.container
hero-headline(marquee="marquee")
a.btn.btn-primary.btn-lg#watch_now(role="button" rel="nofollow" ng-click="signUp($event); toggleHBO(false); " user-flow="")
| {{ classification.cta_button }}
hero-attribution