ng-click 不会触发我的方法
Posted
技术标签:
【中文标题】ng-click 不会触发我的方法【英文标题】：ng-click doesn't fire my method 【发布时间】：2014-02-22 13:57:42 【问题描述】：我对 AngularJS + Typescript 如何协同工作感到疯狂。基本上我想要实现的是对方法的简单调用。问题是我必须使用某种“架构”，我不知道我在哪里犯了错误。
这是我的界面（IAthorizathionScope.ts）：
模块主 导出接口 IAuthorizationScope 扩展 ng.IScope vm：身份验证控制器； 登录：（用户名：字符串，密码：字符串）=> void；这是我的控制器（AuthorizationController.ts）：
模块主 '使用严格'; 导出类 AuthenticationController 公共静态 $inject = [ '$范围', ]; 私人用户名：字符串； 私人密码：字符串； 构造函数（$scope：IAuthorizationScope） $scope.vm = 这个； 登录 = 功能（用户名：字符串，密码：字符串） alert("授权！");这是我的观点（secretTest.html）：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div ng-controller="AuthenticationController">
<label>Username: <input type="text" ng-model="username"/> </label>
<label>Password: <input type="password" ng-model="password"/> </label>
<button ng-click="vm.login(username, password)">
Login
</button>
</div>
</body>
</html>
编辑 这是我的应用程序文件 (Application.js)
模块主要 '使用严格'; var txtmobileMvc = angular.module('txtmobileMvc', ['kendo.directives']) // 工厂 .factory('Main.ItemCommonModel', function ($rootScope) return new Main.ItemCommonModel($rootScope); ) // 控制器 .controller('detailCollectionController', DetailCollectionController) .controller('detailController', DetailController) .controller('gridController', GridController) .controller('authenticationController', AuthenticationController) .controller('wijmoController', WijmoController) // 服务 .service('itemStorage', ItemStorage) .service('itemDataService', ItemDataService) // 页面路由 .config(($routeProvider: ng.IRouteProvider) => $routeProvider .when('/', 控制器: 'detailController', templateUrl: 'views/detail.html' ) .when('/grid', 控制器: 'gridController', templateUrl: 'views/grid.html' ) .when('/secret', 控制器: AuthenticationController, templateUrl: 'views/secretTest.html') .when('/wijmo', 控制器: WijmoController, templateUrl: 'views/wijmoTest.html' ) .otherwise(redirectTo: '/' ); );可能我也对这些东西在这里的工作方式感到困惑。 提前谢谢你。
【问题讨论】：
您似乎缺少ng-app 指令。将此指令添加到body，如<body ng-app>
嗯 - 我不是打字员，但我确定登录是在 $scope 上？如果不是，它不会触发.. 如果您使用 console.log($scope) 会发生什么？是虚拟机。在那里登录？
@Satpal 我是否需要在每个“视图”中添加 ng-app 指令，即使我使用的是 $routeProvider ？因为我在某处读到，如果我只把它放在索引上，其他人就不需要它。我可能错了
@alonisser 实际上我遇到了一些错误 --- TypeError: Object doesn't support property or method 'login' at AuthenticationController (localhost:8000/SPA/App/scripts/Application.js:563:17) at invoke (localhost:8000/SPA/App/scripts/libs/vendor/angular.js:3000:18) at instantiate (@987654324) @) --- 我该怎么办？
如果你在 index.html 中有指令，那么你应该使用部分模板。
【参考方案1】：
基本上问题是我将此代码添加到我的 HTML 文件中
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
控制器无法启动我的方法。我也意识到，如果我将控制器添加到
angular.module(...).controller(...)我不需要将 ng-controller 添加到 HTML 文件中。有了这两件事，login() 方法就被 ng-click 触发了。 无论如何感谢您的帮助。
【讨论】：
【参考方案2】：如评论中所述，您缺少ng-app
另外，您注册的控制器名称.controller('authenticationController', AuthenticationController) 应与ng-controller 中的名称ng-controller="AuthenticationController" 匹配
我会同时做AuthenticationController
【讨论】：
以上是关于ng-click 不会触发我的方法的主要内容，如果未能解决你的问题，请参考以下文章