AngularJS 登录表单与 ng-click 不起作用

2024-04-02

我在这个插件中写了一个基本的登录表单http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview(单击主页路径上的红色“登录仪表板”按钮)。

但是由于某种原因,我无法在我的loginCtrl控制器代码中触发login()方法。

为什么这个例子有效,而我的却无效?http://plnkr.co/edit/H4SVl6?p=preview http://plnkr.co/edit/H4SVl6?p=preview

相反,它所做的是老式 URL 重定向,其中用户/密码参数作为表单变量传入。我不知道出了什么问题。

Here is LoginCtrl代码以及login-form.html模板 :

(function () {
    'use strict';

    angular.module('routerApp').controller('LoginCtrl',
        ['$rootScope', '$scope', authenticate]);

    function authenticate($rootScope, $scope,   userService) {

        var login = this;

        login.loginUser = function () {
            login.dataLoading = true;
            //loginService.authUser(login.user, login.password);  // TO DO !!!
        };
        login.test = function () {
            var test = true;
        };
    }
})();
<div ng-show="error" class="alert alert-danger">{{error}}</div>
<form  ng-submit="login.loginUser()" name="form">
    <div class="form-group">
        <label for="username">Username</label>
        <i class="fa fa-key"></i>
        <input type="text" name="username" id="username" class="form-control" ng-model="login.username" required />
        <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <i class="fa fa-lock"></i>
        <input type="password" name="password" id="password" class="form-control" ng-model="login.password" required />
        <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
    </div>
    <div class="form-actions">
        <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Login</button>
        <img ng-if="login.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
    </div>
</form>

在我的本地应用程序中,它通过 URL 发布旧式表单变量,但我无法让它触发login.loginUser里面的函数如下LoginCtrl.

先感谢您...

Bob


由于某些奇怪的原因(也许是 ui-router 版本控制)controllerAs不管用。

戴安娜的答案是有效的,但它没有使用controlleras句法。 如果您仍想使用它,请更改ui-router设置为:

.state('login', {
        url: "/login",
        templateUrl: "login-form.html",
        controller: 'LoginCtrl as login',
    })

这应该够了吧 ;)

一探究竟:http://plnkr.co/edit/OCqNexVeFFxt4kUuEVc1?p=preview http://plnkr.co/edit/OCqNexVeFFxt4kUuEVc1?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 登录表单与 ng-click 不起作用 的相关文章

随机推荐

  • 三柱布局 侧柱弹性中间固定

    我想知道是否有人知道如何使居中 div 具有固定宽度 并在居中 div 的两侧具有右侧和左侧 div 弹性 居中的 div 也具有 min width 和 max width css 属性 尝试添加您在发布问题时尝试过的代码 HTML di
  • SignalR 跨域不适用于 IE10 以外的浏览器

    我正在使用 SignalR 跨域通信编写一个网络应用程序 我正在使用最新版本的 SignalR 1 0 1 以下是 jQuery 的文档就绪事件中的代码 var connection hubConnection url var proxy
  • 如何在实时添加对象时从 Redis 中弹出对象?

    我想让 Node js 进程运行 因为它正在检查 Redis 服务器是否有任何新的弹出内容 另一个进程将偶尔进行推送 而 Node 进程将尝试弹出任何进来的内容 Node 进程将保持运行 有人能给我指出一个好的方向吗 我正在尝试找出如何监听
  • 在 C 中访问嵌套结构中的项目

    我尝试访问另一个结构中的 下一个 但失败了 尽管我尝试了很多方法 这是嵌套结构 struct list head struct list head next prev typedef struct char key char value s
  • 从 django 中的 url 获取应用程序名称

    我知道如何在 django 中使用 url 解析来获取 url 名称 我想以类似的方式处理来自某个应用程序的所有请求 所以我想我可以通过从 url 获取应用程序名称来做到这一点 我怎样才能做到这一点 路径你会很头痛 因为你必须应用很多分割
  • [ valueForUndefinedKey:]:此类对于键 AppointmentDate 不符合键值编码。 - 迅速

    我想对对象数组进行排序 下面是我对对象数组进行排序的函数 class func Fn SortByParameter arrayToSort NSMutableArray paramName NSString isAscending Boo
  • 四舍五入到 0.5

    我有一个结果 1 444444 我想将此结果舍入为 1 5 这是我使用的代码 a text String round 13000 9000 0 但这是四舍五入到 1 0 我需要四舍五入到 1 5 和这段代码 a text String ce
  • 属性。有什么有用的目的?

    Under System Runtime InteropServices the
  • Vim 显示:ImportError:没有名为 site 的模块。当我使用 Canopy1.1 时

    我在Windows Xp 32中安装了Canopy 1 1 express 并使用vim作为编辑器 当我打字时 python print hello 在vim命令行中显示 Importerror No module named site然后
  • Flutter Android SDK 版本 28 错误,但我使用的是 30

    当我创建一个新的 flutter 应用程序时 它启动 android sdk 版本 28 但我使用 android sdk 30 Flutter doctor 还显示了平台 android 30 build tools 30 0 2 当我尝
  • dll文件的描述

    您好 如何在 dll 文件中查找类的描述 在我的项目中 我在 imagealg dll 中使用 diff calss 告诉我如何找到那个的描述 plz 找到该类的描述的最佳位置是在文档中
  • Eclipse 自动建议并填写变量名称

    好的 所以我的问题是当我创建一个变量时 例如 Object o 当我输入 o 时 它会建议类似 object 的内容 没关系 但是当我按空格时 它会自动填充新名称 基本上我不想关闭自动完成 我只想禁用空格自动填充建议 甚至禁用变量命名建议也
  • 如何使用 C# 在 Excel 图表上添加多个系列

    我想添加一个如下图所示的图表 该图表有 3 个系列 黑色 红色 蓝色 以下是在图表上创建 一个 系列的代码块 Excel Workbook oWorkbook Excel Workbook oSheet Parent Excel Chart
  • 捕获最后一个 WM_SIZE

    当我调整窗口大小时 我想告诉程序的另一部分我的窗口大小已更改 我继续读下去MSDN http msdn microsoft com en us library ms632646 VS 85 aspx that WM 尺寸 留言WM SIZE
  • 将 less-plugin-glob 与 Webpack 结合使用

    我正在尝试将现有项目的构建系统从gulp to webpack 它当前有一个入口点 less 文件 可导入各种其他文件 如下所示 import bower components bootstrap less bootstrap less i
  • 即使在索引字段上,MongoDB 排序也非常慢

    今天我遇到了这个问题 我的 MongoDB 查询速度非常慢并且超时 我发布了这个问题 MongoDB 记录太多 https stackoverflow com questions 11701103 mongodb too many reco
  • iPhone 中的 jpg 图像和 2x 图像

    我正在开发 iphone 应用程序并定位iOS 4 0或稍后 我正在尝试将图像添加到 UIImageView 并且图像位于jpeg格式 这就是我到目前为止所做的 UIImageView bgImageView UIImageView all
  • Div 溢出滚动到底部:可能吗?

    如果我有一个div with overflow auto使其成为可滚动的div我加载它的信息会形成一个重要的滚动区域 有没有一种方法可以在我加载信息时 div显示底部结果 或者基本上滚动到底部 我见过 jQuery 解决方案 但这是在 HT
  • 如何让图片大小在滚动时平滑变化?

    我有带有大徽标的标题 我想在滚动超过 100px 后将其变小 这工作正常但不流畅 我怎样才能做到平滑 我的代码 function window scroll function if this scrollTop gt 100 header
  • AngularJS 登录表单与 ng-click 不起作用

    我在这个插件中写了一个基本的登录表单http plnkr co edit xQEN1ZNN5ZEw1CSwNw97 p preview http plnkr co edit xQEN1ZNN5ZEw1CSwNw97 p preview 单击