防止图像在AngularJs中渲染

我有这个jsFiddle： http ： //jsfiddle.net/HMZuh/1/

其中包含此HTML

这个脚本： 

 function ShowHideController($scope) { $scope.showMe = false; $scope.imageSource = ''; $scope.showImage = function(){ $scope.showMe = true; $scope.imageSource = 'http://sofzh.miximages.com/javascript/logo3w.png'; } }

我得到的是404，当源尚未设置时找不到图像，当showMe为假时有没有办法防止这种情况？

要解决这个问题，您可以：

  1. 使用ng-repeat http://jsfiddle.net/bGA4T/
  2. 使用$ compile并声明自己的指令
  3. 编写自己的ng-src指令
  4. …

我认为有很多方法可以解决这个问题。

我通过使用ui-if从http://angular-ui.github.com/改进了这个，而不是隐藏/显示使用ng-hide / ng-show，ui-如果只是不渲染元素。