我有一个角度基础仪表板应用程序，在应用程序仪表板页面图标中，当我单击特定图标时，图标应该被重定向到带有该图标的菜单痕迹的路由页面。而不是显示图像必须包括字体 - 该部分的图标。
displayImg用于显示图像，displayName用于显示名称
下面的代码与image.now正常工作我必须用font-icon替换。 怎么做。
这是一个工作的plunker代码：
https://plnkr.co/edit/vKekaq7pCAqOpdXXJJYc?p=info
在单击详细信息的示例中，主页图标在菜单中，当您单击产品时，产品图标将在那里，订单意味着订单图标将在那里显示所有图像，这在特定路线下提到。
.state('home.product', {
url: '/product',
views: {
'main@': {
templateUrl: 'product.html',
}
},
data: {
displayName: 'product',
displayImg: 'data:image/png;base64,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'
}
})
.state('home.order', {
url: '/order',
views: {
'main@': {
templateUrl: 'order.html',
}
},
data: {
displayName: 'ordericon',
displayImg: 'data:image/png;base64,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'
}
})
这是面包屑库用于动态菜单
Breadcrumb js：
/**
* uiBreadcrumbs automatic breadcrumbs directive for AngularJS & Angular ui-router.
*
* https://github.com/michaelbromley/angularUtils/tree/master/src/directives/uiBreadcrumbs
*
* Copyright 2014 Michael Bromley <michael@michaelbromley.co.uk>
*/
(function() {
/**
* Config
*/
var moduleName = 'ngBreadCrumb';
var templateUrl = 'ngBreadCrumbTemplate.html';
/**
* Module
*/
var module;
try {
module = angular.module(moduleName);
} catch(err) {
// named module does not exist, so create one
module = angular.module(moduleName, ['ui.router']);
}
module.directive('uiBreadcrumbs', ['$interpolate', '$state', function($interpolate, $state) {
return {
restrict: 'E',
templateUrl: function(elem, attrs) {
return attrs.templateUrl || templateUrl;
},
scope: {
displaynameProperty: '@',
displayimgProperty:'@',
abstractProxyProperty: '@?'
},
link: function(scope) {
scope.breadcrumbs = [];
if ($state.$current.name !== '') {
updateBreadcrumbsArray();
}
scope.$on('$stateChangeSuccess', function() {
updateBreadcrumbsArray();
});
/**
* Start with the current state and traverse up the path to build the
* array of breadcrumbs that can be used in an ng-repeat in the template.
*/
function updateBreadcrumbsArray() {
var workingState;
var displayName;
var displayImg = 'http://www.freeiconspng.com/uploads/home-icon-png-home-icon-31.png'; //Sampriya
var breadcrumbs = [];
var currentState = $state.$current;
while(currentState && currentState.name !== '') {
workingState = getWorkingState(currentState);
if (workingState) {
displayName = getDisplayName(workingState);
displayImg = getDisplayImg(workingState);//Sampriya
if (displayName !== false && !stateAlreadyInBreadcrumbs(workingState, breadcrumbs)) {
if (displayImg !== false) {
breadcrumbs.push({
displayName: displayName,
displayImg: displayImg,
route: workingState.name
});
}
else {
breadcrumbs.push({
displayName: displayName,
route: workingState.name
});
}
}
//Sampriya
//if (displayImg !== false && !stateAlreadyInBreadcrumbs(workingState, breadcrumbs)) {
// breadcrumbs.push({
// displayImg: displayImg,
// route: workingState.name
// });
//}
//=====
}
currentState = currentState.parent;
}
breadcrumbs.reverse();
scope.breadcrumbs = breadcrumbs;
}
/**
* Get the state to put in the breadcrumbs array, taking into account that if the current state is abstract,
* we need to either substitute it with the state named in the `scope.abstractProxyProperty` property, or
* set it to `false` which means this breadcrumb level will be skipped entirely.
* @param currentState
* @returns {*}
*/
function getWorkingState(currentState) {
var proxyStateName;
var workingState = currentState;
if (currentState.abstract === true) {
if (typeof scope.abstractProxyProperty !== 'undefined') {
proxyStateName = getObjectValue(scope.abstractProxyProperty, currentState);
if (proxyStateName) {
workingState = $state.get(proxyStateName);
} else {
workingState = false;
}
} else {
workingState = false;
}
}
return workingState;
}
/**
* Resolve the displayName of the specified state. Take the property specified by the `displayname-property`
* attribute and look up the corresponding property on the state's config object. The specified string can be interpolated against any resolved
* properties on the state config object, by using the usual {{ }} syntax.
* @param currentState
* @returns {*}
*/
function getDisplayName(currentState) {
var interpolationContext;
var propertyReference;
var displayName;
if (!scope.displaynameProperty) {
// if the displayname-property attribute was not specified, default to the state's name
return currentState.name;
}
propertyReference = getObjectValue(scope.displaynameProperty, currentState);
if (propertyReference === false) {
return false;
} else if (typeof propertyReference === 'undefined') {
return currentState.name;
} else {
// use the $interpolate service to handle any bindings in the propertyReference string.
interpolationContext = (typeof currentState.locals !== 'undefined') ? currentState.locals.globals : currentState;
displayName = $interpolate(propertyReference)(interpolationContext);
return displayName;
}
}
//Sampriya
/**
* Resolve the displayImg of the specified state. Take the property specified by the `displayimg-property`
* attribute and look up the corresponding property on the state's config object. The specified string can be interpolated against any resolved
* properties on the state config object, by using the usual {{ }} syntax.
* @param currentState
* @returns {*}
*/
function getDisplayImg(currentState) {
var interpolationContext;
var propertyReference;
var displayImg;
if (!scope.displayimgProperty) {
// if the displayimg-property attribute was not specified, default to the state's name
return currentState.name;
}
propertyReference = getObjectValue(scope.displayimgProperty, currentState);
if (propertyReference === false) {
return false;
} else if (typeof propertyReference === 'undefined') {
return currentState.name;
} else {
// use the $interpolate service to handle any bindings in the propertyReference string.
interpolationContext = (typeof currentState.locals !== 'undefined') ? currentState.locals.globals : currentState;
displayImg = $interpolate(propertyReference)(interpolationContext);
return displayImg;
}
}
//=======
/**
* Given a string of the type 'object.property.property', traverse the given context (eg the current $state object) and return the
* value found at that path.
*
* @param objectPath
* @param context
* @returns {*}
*/
function getObjectValue(objectPath, context) {
var i;
var propertyArray = objectPath.split('.');
var propertyReference = context;
for (i = 0; i < propertyArray.length; i ++) {
if (angular.isDefined(propertyReference[propertyArray[i]])) {
propertyReference = propertyReference[propertyArray[i]];
} else {
// if the specified property was not found, default to the state's name
return undefined;
}
}
return propertyReference;
}
/**
* Check whether the current `state` has already appeared in the current breadcrumbs array. This check is necessary
* when using abstract states that might specify a proxy that is already there in the breadcrumbs.
* @param state
* @param breadcrumbs
* @returns {boolean}
*/
function stateAlreadyInBreadcrumbs(state, breadcrumbs) {
var i;
var alreadyUsed = false;
for(i = 0; i < breadcrumbs.length; i++) {
if (breadcrumbs[i].route === state.name) {
alreadyUsed = true;
}
}
return alreadyUsed;
}
}
};
}]);
})();
在状态路由器下有数据部分添加了图像和显示名称 对于特定图标，请单击。
面包屑模板：
<ol class="breadcrumb">
<li ng-repeat="crumb in breadcrumbs">
<!--ng-class="{ active: $last }"--><a ui-sref="{{ crumb.route }}" ng-if="!$last"><img ng-src="{{ crumb.displayImg }}" class="responsiveBCrumb" alt="" />{{crumb.displayName}}</a><span ng-show="$last"><img ng-src="{{ crumb.displayImg }}" class="responsiveBCrumb" alt="" />{{crumb.displayName}}</span>
</li>
</ol>
每个模板都会为动态菜单添加
product.html
<h1>Product</h1>
<div class="note_panel note_panel_yellow">
<div class="note_body note_panel_solid_border">
<h4>Product Page</h4>
<p>Sample Angular Breadcrumb</p>
</div>
</div>