Question

我刚开始学习Angular。现在我正在尝试实现一个从集合中填充的ng-repeat div。我还想实现一个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>

此代码确实可以显示已完成的元素。不幸的是，mouseOverElement不会触发。

我必须承认我并不理解范围概念。所以我尝试将app.controller定义更改为：

        app.controller('RezeptController', function ($scope) {
        $scope.rezepte = rezeptCollection;

        $scope.mouseOverElement = function (element) {
            $scope.msg = "Mouse Over: " + element.name;
        }
    });

这不能解决问题，而且根本没有显示项目。请帮助我理解我在这里缺少的东西。

Answer 1

我认为您的问题源于您使用"RezeptController as rezepte"表示法这一事实，这是一种很好的做法，但是您对如何访问该范围内的内容感到不一致。

您需要确保使用rezepte.作为任何范围变量或函数调用的前缀。通过将this中的rezepte别名化为<!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>，这也是一种好的做法。控制器：

fgets()

Answer 2

更新：＆＃xA;这里有一些问题：

＆＃xA;＆＃xA;

你正在传递<代码>元素进入mouseover表达式，但没有这样的变量。 Angular确实使 $ event 对象可用，但它无法访问该元素的范围，因此您需要使用它。
As在其他地方提到过，您正在使用 controllerAs 语法，但随后尝试访问分配给控制器的变量，而不指示您正在访问哪个控制器。这适用于 msg 表达式和 mouseover 表达式。
如下所述，您的 rezeptCollection 变量不可用于控制器 - 在控制器定义中声明并定义它。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

在调用鼠标悬停功能时你也没有访问范围：＆＃xA; ＆＃xA;＆lt ;! - 这个控制器实例是什么？ - ＆gt;＆＃xA;＆lt; div ng-mouseover =“mouseOverElement（element）”＆gt;＆＃xA;

＆＃xA;＆＃xA;

试试这个：＆ #xA; ＆＃xA;＆lt;！ - 表示控制器实例 - ＆gt;＆＃xA;＆lt; div ng-mouseover =“rezept.mouseOverElement（element）”＆gt;＆＃xA;

＆＃XA;

Answer 3

尝试将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>

ng-mouseover无效

3 个答案: