angularjs v1.5.9:ng-style(ngstyle)
我的指示模板中有一个简单的div ,带有 ng-style 命令,我使用interpolation表达式在运行时获得不同的样式:
<div class="large-1 tile tile-plain"
ng-style="{'background-image': 'url(assets/images/km-types/ico-{{iconMap[item.doctype]}}.png)'}">
</div>
指令如下:
.directive('knowledgeItemIcon', function () {
return {
restrict: 'E',
templateUrl: 'templates/item-icon.html',
scope: {
item: '='
},
link: function (scope,element,attrs) {
scope.iconMap = {
'howto': 'pen',
'reference': 'settings',
//...
};
}
};
});
ICONMAP 是指令的链接函数中定义的静态数组。 DockType 是范围中项目的属性。
但是,当模板渲染到浏览器时,我得到了:
<knowledge-item-icon item="vm.item" class="ng-isolate-scope">
<div class="large-1 tile tile-plain" ng-style="{'background-image': 'url(assets/images/km-types/ico-phone.png)'} style="background-image: url("assets/images/km-types/ico-.png");">
</div>
</knowledge-item-icon>
in ng-style 似乎在iCo-phone.png中获得了正确的字符串,但是 style> style 属性中的null。我检查了该项目和ICONMAP对象不是不确定的,但是为什么在Web应用程序中获得了这种差异?
目前,我在div元素中添加 img ng> ng-src 命令的节点,例如:
<img ng-src="assets/images/km-types/ico-{{iconMap[item.doctype] || default}}.png" alt="">
它可以翻译成正确的字符串:
<img ng-src="assets/images/km-types/ico-phone.png" alt="" src="assets/images/km-types/ico-phone.png">
而不是编写复杂的html,建议您使用样式方法或值
<div class="large-1 tile tile-plain"
ng-style="{'background-image': 'url(assets/images/km-types/ico-{{iconMap[item.doctype]}}.png)'}">
</div>
是:
<div class="large-1 tile tile-plain"
ng-style="getStyle(item.doctype)">
{{candidate.name}}
</div>
其中 getStyle
是:
$scope.getStyle = function(type){
return {
'background-image': "url(assets/images/km-types/ico-" + iconMap[type] + ".png)"
}
}
更清晰的方式
小提琴中的一些演示
您在ng-style
标签中有错字。
更改
<div ng-style="{'background-image': 'url(assets/images/km-types/ico-{{iconMap[item.doctype]}}.png)''}">
to
<div ng-style="{'background-image': 'url(assets/images/km-types/ico-{{iconMap[item.doctype]}}.png)'}">
请参见下面的示例。
var app = angular.module("app", []);
app.controller("MainController", function($scope) {
$scope.item = {
"doctype": "test"
}
$scope.iconMap = {
"test": "test-image"
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
<div ng-style="{'background-image': 'url(assets/images/km-types/ico-{{iconMap[item.doctype]}}.png)'}">
</div>
</div>