【问题标题】:Angular JS Button ng-click doesn't call methodAngular JS Button ng-click 不调用方法
【发布时间】:2016-08-03 13:03:59
【问题描述】:

现在我阅读了很多关于这个问题的帖子,但似乎没有一个解决方案。

在我的 Angular 应用程序中,我使用 angular-fullstack:route 创建了一条新路线

这是我的控制器、模板和配置文件:

控制器:

'use strict';

(function() {
  class AnmeldungCtrl {

    constructor($http, $window, $uibModal, $state) {

    }

    searchUser(searchString) {
      console.log("search Method");
      if (searchString.isNaN()) {
        this.state = "search";
        console.log("search");
        //TODO Search for name
      }
      else if (searchString >= 1000000) {
        this.state = "anmeldung";
        console.log("anmeldung");
        //TODO Search for bar code
      }
      else {
        this.state = "edit";
        console.log("edit");
        //TODO Search for Participant
      }
    }
  }

  angular.module('schwimmfestivalApp').controller('AnmeldungCtrl', AnmeldungCtrl);
})();

模板:

<div>

  <input type="text" ng-model="query" >

  <button ng-click="ctrl.searchUser(query)">Search</button>
  {{query}}
</div>

配置文件:

'use strict';

angular.module('schwimmfestivalApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('anmeldung', {
        url: '/anmeldung',
        templateUrl: 'app/anmeldung/anmeldung.html',
        controller: 'AnmeldungCtrl',
        controllerAs: 'ctrl'
      });
  });

正如我在标题中提到的,出于某种原因,控制器上的方法没有被调用。我不知道为什么。

在我的其他路线上它确实有效。

希望你能给我一个提示。

提前致谢。

【问题讨论】:

  • 能否提供一些 Plunk 或 jsfiddel 以便更好地理解。
  • ctrl.searchUser = function (searchString) {...}
  • 你的项目中是否包含控制器文件?
  • 是的,它是
  • @Viplock 很抱歉,但我从来没有用 angular 来处理小提琴...... :(

标签: angularjs button angular-fullstack


【解决方案1】:

好的,我让它工作了。在我看来这是一个错误(正如预期的那样)。我的一位同事在另一条路径中创建了一个具有相同标识符的控制器。

所以如果发生这样的事情,angular 不会抛出错误。因为第二个控制器位于较低的路径中,所以它位于原始控制器之后的包含处。

感谢@MMhunter 在构造函数中放置了控制台输出。这不是在我的开发环境中打印的。于是我开始寻找原因,并找到了第二个控制器。

感谢大家的帮助。

【讨论】:

    【解决方案2】:

    尝试仅使用 searchUser(query) 它可能会起作用,因为控制器已经添加,无需使用控制器调用函数

    【讨论】:

    • 这不起作用,我的浏览器控制台没有输出
    • 这不是解决方案。
    猜你喜欢
    • 2018-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多