Question

在这fiddle中，我想将鼠标悬停在＆＃34;你的真实＆＃34;当文字消失时，图像会出现。是否必须初始化应用才能实现此功能？我没想到它......

角度HTML看起来像这样（我没有在这里移动我的整个应用程序，只是试图让这部分工作）

<a ng-init="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'">
<span ng-hide="imgsrc.show"
      ng-mouseover="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'"
      ng-mouseout="imgsrc.hide">
      Yours Truly
</span>
<img ng-src="{{imgsrc}}"/>
</a>,

Answer 1

可以在没有合适的控制器的情那就是说，我继续前进并让它继续工作：

ng-app

当您将鼠标悬停在＆＃34; Yours Truly＆＃34;上时会显示图像，并在您移开鼠标时隐藏图像。阻止您的示例工作的主要因素是来自最顶层元素的缺少{{1}}指令。除此之外，我还清理了一些逻辑，以便更容易推断出正在发生的事情。

如果您希望在行动中看到它，那么这是一个JSFiddle：https://jsfiddle.net/kv4qvu3w/2/

Answer 2

您可以将ng-show用于此

试试这个

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module('myApp', []);

    app.controller('surveyController', function($scope){
      $scope.imgsrc = 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg';

      $scope.changeImg = function(type){
        if (type == 'hover') {
          $scope.imgsrc = 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg';
        }else{
          $scope.imgsrc = '';
        }

      }

    });


  </script>
</head>
<body ng-controller="surveyController" ng-app="myApp">

  <div ng-mouseover="changeImg('hover')" ng-mouseout="changeImg('out')">hover me to hide img</div>

  <div ng-show="imgsrc.length>2">
    <img style="height: 200px; width: 200px;" ng-src="{{imgsrc}}"/>
  </div>
</a>, 
{{imgsrc}}
</body>
</html>

＆＃13;

AngularJS在鼠标悬停时显示图像

2 个答案: