Question

我通过YouTube教程系列学习Angular。在本教程中，您将创建用户名和密码输入，然后使用控制器和ngRoute在使用成功凭据时显示dashboard.html页面。问题是，当单击按钮时，没有任何反应，是否输入了正确的凭据。一切都在进行教程，我已经彻底检查了代码，我的看起来就像教程中的代码一样。我确定我必须遗漏一些东西。

我的想法：

点击事件触发有问题，所以我调用该函数的方式可能有问题吗？
本教程使用较旧的角度版本（1.3.14），也许情况有所改变？我使用的是1.4.9，但我查找了ng-click指令的api数据，一切似乎都很好。我也试过使用旧版本无济于事。
我对ngRoute做错了，可能是因为范围误用了吗？

我正在插入下面的所有代码。谢谢你看看！

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Place Title Here</title>
    <meta charset = "utf-8"/>
    <meta http-equiv="X-UA-compatible" content="IE-edge, chrome=1">
    <meta name = "viewport" content = "width = device - width, initial-scale = 1.0"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="controller.js"></script>
</head>
<body ng-app="mainApp">

    <div ng-view></div>
</body>
</html>

的login.html

<div ng-controller="loginCtrl"></div>
<form action="/" id="myLogin">
    Username: <input type="text" id="username" ng-model="username"><br>
    Password: <input type="password" id="password" ng-model="password"><br>
    <button type="button" ng-click="submit()">Login</button>
</form>

controller.js

var app = angular.module('mainApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'login.html'
    })
    .when('/dashboard', {
        templateUrl: 'dashboard.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('loginCtrl', function($scope, $location) {
    $scope.submit = function() {
        var uname = $scope.username;
        var password =  $scope.password;
        if($scope.username == 'admin' && $scope.password == 'admin') {
            $location.path('/dashboard');
        }

        else {
            alert('Nope')
        }
    };
});

dashboard.html

Welcome User.

Answer 1

您的form需要在ng-controller

的div中

<div ng-controller="loginCtrl">
  <form action="/" id="myLogin">
      Username: <input type="text" id="username" ng-model="username"><br>
      Password: <input type="password" id="password" ng-model="password"><br>
      <button type="button" ng-click="submit()">Login</button>
  </form>
</div>

否则它无法访问submit()功能。

ng-click事件似乎并不适用于简单的Angular应用程序

1 个答案: