Hi,
Recently we've had to change a header menu for some rules on when dropdown items display. Instead of modifying the original I have copied the original and made copies of the anguler templates, associating them with the new header.
In the menuTemplate - TAFE item if I comment out the last line, the page loads the correct CSS but the dropdown menu's do not display, this line is required. If I use the original template 'spDropdownTreeTemplate' everything loads properly, however I want to keep the original as is. I have copied it and made 'spDropdownTreeTemplate - TAFE', associating it it with the new header, 'Header menu - TAFE'.
The problem is I am not sure how 'spDropdownTreeTemplate' was referenced, so I have been unable to update it to the new reference of 'spDropdownTreeTemplate - TAFE', can someone please assist as my angular is less than optimal.
Template: spDropdownTreeTemplate - TAFE
<a ng-if="mi.type == 'link'" title="{{mi.title}}" class='view_all_link' target="{{mi.target}}" href="{{mi.href}}">
{{mi.title | characters:60}}
</a>
<a ng-if="mi.type == 'record' && !mi.__page" title="{{mi.short_description}}" href="?id=ticket&table={{mi.__table}}&sys_id={{mi.sys_id}}">
<span>{{mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="mi.sys_created_on" />
</span>
{{mi.number}}
</span>
</a>
<a ng-if="mi.type == 'record' && mi.__page" title="{{mi.short_description}}" href="?id={{mi.__page}}&table={{mi.__table}}&sys_id={{mi.sys_id}}">
<span>{{mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="mi.sys_created_on" />
</span>
{{mi.number}}
</span>
</a>
<a ng-if="mi.type == 'request'" title="{{mi.short_description}}" href="?id=sc_request&table={{mi.__table}}&sys_id={{mi.sys_id}}">
<span>{{mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="mi.sys_created_on" />
</span>
{{mi.number}}
</span>
</a>
<a ng-if="mi.type == 'approval'" title="{{mi.short_description}}" href="?id=approval&table={{mi.__table}}&sys_id={{mi.sys_id}}">
<span ng-if="mi.short_description">{{mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="mi.sys_created_on" />
</span>
{{mi.number}}
</span>
</a>
<a ng-if="mi.type == 'menu' && mi.items.length" title="{{mi.title}}" href="javascript:void(0)" class="menu_trigger right-caret">
{{mi.title | characters:60}}
</a>
<sp-dropdown-tree ng-if="mi.type == 'menu' && mi.items.length" items="mi.items" />
Template: menuTemplate - TAFE
<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}">
<!--<span ng-bind-html="item.label"></span>-->
{{item.label}}
</a>
<a ng-if="item.items.length > 0" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<!--<span ng-bind-html="item.label"></span>-->
{{item.label}}
<span class="caret"></span>
</a>
<ul ng-if="item.items.length > 0" class="dropdown-menu" role="menu">
<li ng-repeat="item in item.items" ng-include="'menuTemplate - TAFE'" />
</ul>
<a ng-if="item.scriptedItems.count > 0 && item.scriptedItems.badgeNoDropdown != true" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">
<!--<a ng-if="item.scriptedItems.count > 0" href="javascript:void(0)" class="parentCollapse" title="{{item.hint}}"
data-toggle="collapse" data-target=".parentCollapse + ul.dropdown-menu">-->
<span ng-bind-html="item.label"></span>
<span class='clickableArea'></span>
<span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
</a>
<!-- Scripted Lists that have no results -->
<a ng-if="item.scriptedItems && item.scriptedItems.count == 0 && item.scriptedItems.showWhenEmpty" href="{{item.scriptedItems.urlWhenEmpty}}" title="{{item.hint}}">
<!--<span ng-bind-html="item.label"></span>-->
{{ item.label }}
</a>
<!-- Badge count with no dropdown list -->
<a ng-if="item.scriptedItems && item.scriptedItems.badgeNoDropdown == true" href="{{item.scriptedItems.urlWhenEmpty}}" title="{{item.hint}}">
<!--<span ng-bind-html="item.label"></span>-->
{{ item.label }}
<span ng-if="item.scriptedItems.count > 0" class="label label-as-badge label-danger sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
</a>
<sp-dropdown-tree ng-if="item.scriptedItems.count > 0 && item.scriptedItems.badgeNoDropdown != true" items="item.scriptedItems.items" />
Widget: Header menu - TAFE
HTML Body:
<ul class="nav navbar-nav" aria-label="${Header menu}">
<div class="header-loader" ng-show="loadingIndicator">
<div class="hidden-xs sp-loading-indicator la-sm">
<div></div>
<div></div>
<div></div>
</div>
</div>
<li ng-repeat="item in visibleItems" ng-class="{dropdown: item.items.length > 0, 'header-menu-item': true}" ng-include="'menuTemplate - TAFE'"></li>
<!-- Wishlist menu -->
<li ng-if="options.enable_wishlist && data.isLoggedIn && data.showWishlist" ng-show="!accessibilityEnabled" class="dropdown hidden-xs">
<a role="menuitem" href="javascript:void(0)"
data-toggle="dropdown"
id="wishlist-menu"
title="${Your Wish List currently has} {{wishlistItemCount}} ${items}"
aria-label="${Wish List}">
<span ng-bind-html="'${Wish List}'" aria-hidden="true"></span>
<span ng-if="wishlistItemCount > 0" aria-hidden="true" class="label label-as-badge label-primary sp-navbar-badge-count">{{wishlistItemCount}}</span>
</a>
<div class="dropdown-menu wishlist-menu">
<sp-widget widget="data.wishlistWidget"></sp-widget>
</div>
</li>
<li ng-if="options.enable_wishlist && data.isLoggedIn && data.showWishlist" class="dropdown" ng-class="{'visible-xs': !accessibilityEnabled}" aria-label="${Your Wish List currently has} {{wishlistItemCount}} ${items}">
<a href="?id=sc_wishlist"
title="${Wish List}"
class="toggle-dropdown">
<span ng-bind-html="'${Wish List}'" aria-hidden="true"></span>
<span ng-if="wishlistItemCount > 0" aria-hidden="true" class="label label-as-badge label-primary sp-navbar-badge-count">{{wishlistItemCount}}</span>
</a>
</li>
<!-- Shopping cart stuff -->
<li ng-if="::options.enable_cart && data.isLoggedIn" ng-show="::!accessibilityEnabled" class="dropdown hidden-xs header-menu-item">
<a href
data-toggle="dropdown"
id="cart-dropdown"
uib-tooltip-template="'item-added-tooltip.html'"
tooltip-placement="bottom"
tooltip-trigger="'none'"
tooltip-is-open="$parent.itemAddedTooltipOpen"
title="${Your shopping cart currently has} {{cartItemCount}} ${items}"
aria-label="${Shopping cart}">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span ng-bind-html="'${Cart}'" aria-hidden="true"></span>
<span ng-if="cartItemCount > 0" aria-hidden="true" class="label label-as-badge label-primary sp-navbar-badge-count">{{cartItemCount}}</span>
</a>
<div class="dropdown-menu cart-dropdown">
<sp-widget widget="data.cartWidget"></sp-widget>
</div>
</li>
<li ng-if="::options.enable_cart && data.isLoggedIn" class="dropdown" ng-class="::{'visible-xs': !accessibilityEnabled}" aria-label="${Your shopping cart currently has} {{cartItemCount}} ${items}">
<a href="?id=sc_cart"
title="${Cart}"
class="toggle-dropdown">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span ng-bind-html="'${Cart}'" aria-hidden="true"></span>
<span ng-if="cartItemCount > 0" aria-hidden="true" class="label label-as-badge label-primary sp-navbar-badge-count">{{cartItemCount}}</span>
</a>
</li>
</ul>
