的index.html

<!DOCTYPE html>
<html >
<head> 
    <title></title> 

    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="test.js"></script>

</head>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp"></div>
    </div> 
</body>
</html>

test.js（Controller）

function testMe(imgSrc) {
    alert(imgSrc);
}

angular
    .module('testModule', [])
    .controller('testCtrl', function($scope) {
        var photoSource = [
            ["images/ph1.jpg", "images/ph2.jpg"],
            ["images/ph5.jpg", "images/ph6.jpg"]
        ];
        var body = "<table>";
        var row = 2;
        var col = 2;
        for (var i = 0; i < row; i++) {
            body += "<tr>";
            for (var j = 0; j < col; j++) {
                body += "<td> <img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');></td>";
            }
            body += "</tr>";
        }
        body += "</table>";
        console.log(body);
        $("#dp").html(body);
    });

问题在于，当鼠标悬停在图像上时，我想在div标签的中心显示该图像。但这部分我无法实现。

Answer 1

你不需要操纵控制器内的html而是使用angular的绑定，这样你的javascript就会变成

function testMe(imgSrc) {

        alert(imgSrc);
     } 

angular
.module('testModule', [])
.controller('testCtrl', function ($scope) {

    $scope.photoSource = [
                    [ "images/ph1.jpg","images/ph2.jpg"],
                    [ "images/ph5.jpg","images/ph6.jpg"]                    
               ]; 

    $scope.showFullImage = function(photoSrc) {
      // this function will call when you mouseover so add logic here and photosrc will be current mouseover image src
       }
});

现在在你的html中使用这个photoSource范围变量生成表

<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp">
<table>
 <tr ng-repeat="photos in photoSource">
  <td ng-repeat="photo in photos">
    <img ng-src="{{photo}}" ng-mouseover="showFullImage(photo)" />
  </td>
 </tr>
</table>
</div>
    </div> 
</body>

Answer 2

Two Way Data-Binding是AngularJS的一个有用功能。您不需要在JavaScript中编写太多逻辑。

试试这个：

angular.module('testModule', []).controller('testCtrl', function ($scope) {
    $scope.photoSource = [
        [ "images/ph1.jpg","images/ph2.jpg"],
        [ "images/ph5.jpg","images/ph6.jpg"] 
    ];
    $scope.fullImage = function (imgSrc) {
        $scope.showImage = imgSrc;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">
        <div id="ds">
            <img ng-src="{{showImage}}"/>
        </div>
        <div id="dp" style="display: flex;">
            <div ng-repeat="photos in photoSource">
                <img class="item" ng-src="{{photo}}" ng-mouseover="fullImage(photo)" ng-repeat="photo in photos" style="max-width: 100%"/>
            </div>
        </div>
    </div>
</body>

Answer 3

这是我用来解决这个问题的逻辑。我假设您希望悬停的项目显示在模式对话框或页面上的居中div中。

使用布尔值声明isVisible隐藏所需的居中CSS（margin-left，margin-right：auto）隐藏div，在控制器中设置为false。
在此容器中保留空图像标记。您可以根据变量使用ng-src更改图像src。保持此变量源指向占位符图像。我们稍后会在用户将鼠标悬停在图像上时更新此内容。
使用ng-mouseover调用函数并将图像源作为参数传递给函数
在此功能中，使用图像源设置占位符图像的来源
通过设置标志显示隐藏的div，isVisible为true
您还需要处理鼠标移出，因为一旦用户将鼠标悬停在图像之外，就需要隐藏容器。

使用Angular JS时要记住以下几点：

不要将jQuery用于DOM操作。您可以使用ng-show / ng-hide显示或隐藏内容，或使用ng-class指令添加/删除类。此外，ng-if可以在需要时实际呈现或删除内容。
不要动态地将HTML插入页面。如果您绝对需要这样做，请使用自定义指令。

Answer 4

我无法编写所有代码，但您可以看到这个小video 我希望它会有所帮助

如何在动态div中显示大尺寸的图像？

的index.html

test.js（Controller）

4 个答案: