当你写这样的东西时:
<img ng-if="image.name != null" ng-src="img/{{ image.name }}_img.png" />
如果image.name = null
Angular 将首先添加标签并评估 src。浏览器将发出 http 请求img/_img.png
wchich 不存在。然后angular 将在解析 ngIf 指令后删除标签。解决此问题的最简单方法是什么?我认为这是ngSrc和ngIf的完美用例。
编辑
在当前不稳定的 1.2.0-rc.2 中,问题已修复,一切都按预期工作。在当前稳定的 1.0.8 中,您甚至不能使用三元运算符。
您不需要 ng-if
指令。只需在表达式中执行三元运算符测试即可。类似的东西
<img ng-src="{{image.name?('img/'+ image.name +'_img.png'):null}}"/>
它应该有效。查看我的 plunker http://plnkr.co/edit/BWiGdO?p=preview
你可以用一个简单的指令来做到这一点。
这是 HTML :
<!DOCTYPE html>
<html ng-app="App">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<img ng-directive />
</body>
</html>
这是控制器的指令:
angular.module('App', [])
.controller('MyCtrl', function($scope){
$scope.image = {name: "myName"};
});
angular.module('App')
.directive('ngDirective', function($compile){
return {
link: function(scope, element, attrs){
if(scope.image.name != null){
$compile($(element).attr('ng-src', 'http://lauterry.github.io/slides-prez-angular/img/angularjs.png'))(scope);
}
}
}
});
这是完整的工作示例: http://plnkr.co/edit/LNgsuX