I am having an issue with this as well. This was a helpful post in trying to explain what is going on with this. But I tried copying the text above for the provider, and I think I have done what I needed with redirecting the templates as well. But my menu just looks like it's loading for a few seconds and then changes the color of the menu, and rendors all links on the page inoperable. Can anyone see something I am missing? I really don't understand angular. The intent is for me to change the shopping cart, but I even took that part out for now just to try to get this to work. But I am obviously not understanding something.
I highlighted the parts that I changed to point to the custom angular. This is the code from the various parts of this attempted change.
ITSC Header Menu (HMTL)
<ul class="nav navbar-nav">
<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 data.menu.items" ng-class="{dropdown: item.items.length > 0}" ng-include="'ITSCmenuTemplate'"></li>
<!-- Shopping cart stuff -->
<li ng-if="options.enable_cart && data.isLoggedIn" class="dropdown hidden-xs">
<a href="javascript:void(0)"
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="${Cart}">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span ng-bind-html="'${Cart}'"></span>
<span ng-if="cartItemCount > 0" 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 visible-xs">
<a href="?id=sc_cart"
title="${Cart}">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span ng-bind-html="'${Cart}'"></span>
<span ng-if="cartItemCount > 0" class="label label-as-badge label-primary sp-navbar-badge-count">{{cartItemCount}}</span>
</a>
</li>
<script>
<div ng-click="toggleCart()" class="item-added-tooltip">${Item has been added to your cart.}</div>
</script>
</ul>
Angular template - itscMenuTemplate
<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}">{{ 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">{{ 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="'itscMenuTemplate'" />
</ul>
<a ng-if="item.scriptedItems.count > 0" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">
<span ng-bind-html="item.label"></span>
<span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
</a>
<itsc-sp-dropdown-tree ng-if="item.scriptedItems.count > 0" items="item.scriptedItems.items" />
Angular template - itscSpDropdownTreeTemplate
<a ng-if="mi.type == 'link'" title="{{mi.title}}" 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_updated_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_updated_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_updated_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_updated_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>
<itsc-sp-dropdown-tree ng-if="mi.type == 'menu' && mi.items.length" items="mi.items" />
Angular provider - type Directive - itscSpDropdownTree
/*! RESOURCE: /scripts/app.$sp/directive.spDropdownTree.js */
function () {
return {
restrict: 'E',
scope: {items: '='},
replace: true,
template: '<ul class="dropdown-menu">' +
'<li ng-repeat="mi in items" style="min-width: 20em;" ng-class="{\'dropdown-submenu\': mi.type == \'menu\', \'dropdown-menu-line\':$index < items.length - 1}" ng-include="getURL()">' +
'</ul>',
link : function(scope, element, attrs, controller) {
scope.getURL = function() {
return 'itscSpDropdownTreeTemplate';
}
}
}
};
(function($) {
$("body").on( "click", "a.menu_trigger", function(e) {
var current = $(this).next();
var grandparent = $(this).parent().parent();
if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
current.toggle();
$(".dropdown-menu").each(function(i, elem) {
var elemClosest = $(elem).closest('.dropdown');
var currentClosest = current.closest('.dropdown');
if (!elem.contains(current[0]) && elem != current[0] && (!currentClosest.length || !elemClosest.length || elemClosest[0] == currentClosest[0]))
$(elem).hide();
})
e.stopPropagation();
});
$("body").on( "click", "a:not(.menu_trigger)", function() {
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
});
})(jQuery);
;
Thanks,
Shannon
