ng-click 不会触发我的方法答案

【问题标题】：ng-click doesn't fire my methodng-click 不会触发我的方法
【发布时间】：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 中有指令，那么你应该使用部分模板。

标签： html angularjs typescript

【解决方案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

【讨论】：