ng-鼠标悬停不起作用

ng-mouseover not working

本文关键字：不起作用 悬停 鼠标 ng-      更新时间：2023-09-26

我刚刚开始学习Angular。现在我正在尝试实现一个从集合填充的 ng-repeatdiv。我还想实现一个 mouseOver 函数，当我将鼠标悬停在其中一个元素上时，它会更改段落中的文本。

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('RezeptController', function ($scope) {
            this.rezepte = rezeptCollection;
            this.mouseOverElement = function (element) {
                this.msg = "Mouse Over: " + element.name;
            }
        });
        var rezeptCollection = [
            {name: 'Okroshka', herkunft: 'Russland'},
            {name: 'Sushi', herkunft: 'Japan'}
        ];
    </script>
    <title></title>
    <meta charset="utf-8" />
</head>
<body class="container" ng-controller="RezeptController as rezepte">
    <div ng-repeat="rezept in rezepte.rezepte" >
        <div ng-mouseover="mouseOverElement(element)">
            {{rezept.name}}
        </div>
    </div>
    <p>{{ msg }}</p>
</body>
</html>

此代码确实完成了显示元素的工作。不幸的是，鼠标覆盖元素不会触发。

我

不得不承认，我并没有完全理解范围的概念。所以我尝试将 app.controller 定义更改为：

        app.controller('RezeptController', function ($scope) {
        $scope.rezepte = rezeptCollection;
        $scope.mouseOverElement = function (element) {
            $scope.msg = "Mouse Over: " + element.name;
        }
    });

这并不能解决问题，而且项目根本不显示。请帮助我了解我在这里缺少什么。

我相信

您的问题源于您正在使用"RezeptController as rezepte"表示法的事实，这是很好的做法，但是您在如何访问该范围内的内容方面不一致。

您需要确保在任何作用域变量或函数调用前面加上rezepte. 通过在控制器中将其别名化为rezepte来消除this混淆也是一种很好的做法：

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('RezeptController', function ($scope) {
            var rezepte = this;
            rezepte.rezepte = rezeptCollection;
            rezepte.mouseOverElement = function (element) {
                rezepte.msg = "Mouse Over: " + element.name;
            }
        });
        var rezeptCollection = [
            {name: 'Okroshka', herkunft: 'Russland'},
            {name: 'Sushi', herkunft: 'Japan'}
        ];
    </script>
    <title></title>
    <meta charset="utf-8" />
</head>
<body class="container" ng-controller="RezeptController as rezepte">
    <div ng-repeat="rezept in rezepte.rezepte" >
        <div ng-mouseover="rezepte.mouseOverElement(rezept)">
            {{rezept.name}}
        </div>
    </div>
    <p>{{ rezepte.msg }}</p>
</body>
</html>

尝试将 rezepte 传递给 mouseOverElement 函数： 

<body class="container" ng-controller="RezeptController as rezepte">
        <div ng-repeat="rezept in rezepte.rezepte" >
            <div ng-mouseover="mouseOverElement(rezepte)">
                {{rezept.name}}
            </div>
        </div>
        <p>{{ msg }}</p>
    </body>

更新：这里有几个问题：

  1. 您正在将element传递到鼠标悬停表达式中，但没有这样的变量。Angular 确实使$event对象可用，但它无法访问该元素的范围，因此您需要使用它。
  2. 如其他部分所述，您使用的是controllerAs语法，但随后尝试访问分配给控制器的变量，而不指示要访问哪个控制器。这适用于您的msg表达式和mouseover表达式。
  3. 正如我在下面提到的，您的rezeptCollection变量对控制器不可用 - 在控制器定义中声明和定义它。

RezeptCollection变量在控制器之后声明，因此它在控制器中不可用。在控制器之前声明。

调用鼠标悬停函数时，您也不会访问范围： <!-- which controller instance is this on? --> <div ng-mouseover="mouseOverElement(element)">

试试这个： <!-- indicate a controller instance --> <div ng-mouseover="rezept.mouseOverElement(element)">

相关文章：