Javascript 鼠标停止工作_Javascript_Angularjs

Javascript 鼠标停止工作

javascript angularjs

Javascript 鼠标停止工作,javascript,angularjs,Javascript,Angularjs,我刚开始学习英语。现在，我正在尝试实现一个从集合填充的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"></s

我刚开始学习英语。现在，我正在尝试实现一个从集合填充的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>

这并不能解决问题，而且项目根本没有显示。请帮助我理解我在这里遗漏了什么。

更新： 这里有几个问题：

您正在将

元素

传递到mouseover表达式中，但没有这样的变量。Angular确实使

$event

对象可用，但它无法访问该元素的作用域，因此您需要使用它

正如其他地方提到的，您正在使用

controllerAs

语法，但随后尝试访问分配给控制器的变量，而不指示您正在访问哪个控制器。这适用于

msg

表达式和

mouseover

表达式

正如我在下面提到的，您的

rezeptCollection

变量对控制器不可用-在控制器定义中声明并定义它

您的

RezeptCollection

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

调用mouseover函数时，您也没有访问作用域：

试试这个：

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


{{rezept.name}
{{msg}}

我认为您的问题源于这样一个事实，即您正在使用

标记法“RezeptController as rezepte”

，这是一种良好的做法，但您在如何访问该范围内的内容方面存在不一致

您需要确保使用

rezepte作为任何作用域变量或函数调用的前缀。

在控制器中将

此

别名为

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>


var-app=angular.module（'MyApp'，[]）；
应用控制器（'RezeptController'，功能（$scope）{
var rezepte=此；
rezepte.rezepte=rezeptCollection；
rezepte.mouseOverElement=函数（元素）{
rezepte.msg=“鼠标悬停：”+element.name；
}
});
变量rezeptCollection=[
{姓名：'Okroshka'，herkunft:'Russland'}，
{名称：'寿司'，herkunft：'日本'}
];
{{rezept.name}
{{rezepte.msg}}

变量定义不会被提升吗？

RezeptCollection

变量定义会被提升吗？变量声明会被提升，但定义不会被提升。如果我按照您建议的方式进行，它仍然不起作用。我试图注释掉这行：rezepte.msg=“鼠标悬停：”+element.name；并发出警报。它正在被触发。因此，事件被触发，但元素“未定义”。没有像

element

这样的变量，而是传入

rezept

。编辑答案以反映这一点

<!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>