Angularjs 避免在有角度的JS中损坏图像_Angularjs

Angularjs 避免在有角度的JS中损坏图像

angularjs

Angularjs 避免在有角度的JS中损坏图像,angularjs,Angularjs,我是AJS新手，所以这听起来可能很傻，但我想知道当图像URL来自表达式或用户输入时，如何避免损坏图像。也许这可以解释： <html ng-app> <head> </head> <body> Name :<input type="text" ng-model="batman" /> <img ng-src="{{batman}}.png" /> <script src="script/angular.mi

我是AJS新手，所以这听起来可能很傻，但我想知道当图像URL来自表达式或用户输入时，如何避免损坏图像。也许这可以解释：

<html ng-app>
<head>

</head>

<body>

Name :<input type="text" ng-model="batman" />

<img ng-src="{{batman}}.png" />


<script src="script/angular.min.js"></script>
</body>
</html>


姓名：

现在我在那个文件夹里有几张照片，我想当我在文本栏中键入时，它们会出现在页面上。但是我们总是会显示这个破碎的图像，直到我们没有键入确切的图像名称。那么有没有办法避免损坏的图像出现呢。谢谢

如果蝙蝠侠模型确实存在，则只有该div将呈现

以下是一条指令，该指令在ngSrc的值更改时隐藏图像元素，直到它看到“加载”事件，然后显示元素：

})

用法：

<img hide-until-good ng-src="{{batman}}.png">

app.directive('hideUntilGood', function() {
  return {
    restrict: 'A',
    multiElement: true,
    link: function(scope, element, attrs) {
      attrs.$observe('ngSrc', function (value) {
        // fix where ngSrc doesn't update when blank
        if (!value || value.length == 0) {
          element.attr('src', value);
        }
        element.css("display", "none");
      });
      element.bind('load', function() {
        element.css("display", "");
      });
    }
  };

<img hide-until-good ng-src="{{batman}}.png">