按钮在 AngularJs 中不起作用

Question

这应该是一个简单的注册页面。在游戏的这个阶段，我想做的就是在尝试提交时将错误记录到控制台，但是注册页面上的按钮已经死了，就好像它们根本没有连接到我的控制器和指令一样。

console.log 否则会起作用，因为我会记录路径位置。 （参见构造函数。） register.html 中的所有表单验证代码都运行良好。

它变得更疯狂：如果我突然从 register.html 中删除 <navbar></navbar>，提交按钮就会起作用。我将错误记录到控制台，但评估按钮仍然没有任何作用。我在其他几个页面上有导航栏指令，它们的按钮都可以正常工作。

register.ts

class Register implements IRegisterCtrl {

    constructor(public $http: ng.IHttpService,
                public $location: ng.ILocationService) {
        console.log($location.path());

    }

    public sendIt(): void {
        console.log("submit run.");

        var url: string = "/";
        var user: any = {};

        this.$http.post(url, user)
            .then(function (res: any): void {
                console.log("success http");
            })
            .catch(function (err: any): void {
                console.log("fail http");
            });
    }

    public static evaluateIt(): void {
        console.log("evaluated");
    }

} // end class

function register(): ng.IDirective {
    return {
        bindToController: true,
        controller: Register,
        controllerAs: "vm",
        replace: true,
        restrict: "AE",
        template: require("./register.html"),
    };
}

angular
    .module("app")
    .directive("register", register);

register.html

<div>

  <!-- when this is removed, sendIt() works, but not evaluateIt() -->
  <navbar></navbar>

  <div class="container-fluid">

  <form name="register" ng-submit="vm.sendIt()" class="form-signin" novalidate>

    <h1 class="form-signin-heading text-muted">Register</h1>

    <input name="email" placeholder="Email Address" type="email" class="form-control" maxlength="320"
           ng-model="vm.email"
           ng-minlength="7"
           required>
    <div ng-messages="register.email.$error" ng-if="register.email.$touched">
      <p class="help-block" ng-message="required">An email address is required.</p>
      <p class="help-block" ng-message="minlength">This email address is too short.</p>
      <p class="help-block" ng-message="email">Please enter a valid email address.</p>
    </div>


    <input name="password" placeholder="Password" type="password" class="form-control" maxlength="115"
           ng-model="vm.password"
           ng-minlength="6"
           required>
    <div ng-messages="register.password.$error" ng-if="register.password.$touched">
      <p class="help-block" ng-message="required">A password is required.</p>
      <p class="help-block" ng-message="minlength">Too short. Try an <a href="http://lifehacker.com/5893510/using-common-phrases-makes-your-passphrase-password-useless-heres-how-to-pick-a-better-phrase">entropic phrase</a>.</p>
    </div>


    <input name="password_confirm" placeholder="Confirm Password" type="password" class="form-control" maxlength="115"
           ng-model="vm.password_confirm"
           required>
    <p class="help-block" ng-show="register.password_confirm.$dirty && vm.password !== vm.password_confirm">Please make the passwords match.</p>

    <button ng-disabled="register.$invalid || vm.password !== vm.password_confirm" class="btn btn-lg btn-primary btn-block" type="submit">
      Submit
    </button>

  </form>

    <button type="button" ng-click="vm.evaluateIt()">Evaluate</button>

  </div>


</div>

我正在使用 webpack，但我现在没有缩小任何东西。所有其他页面都可以正常工作。

如何让按钮正常工作？为什么导航栏会与 this 实例中的提交按钮冲突？

navbar.ts

class Navbar implements INavbarCtrl {

} // end class

function navbar(): ng.IDirective {
    return {
        bindToController: true,
        controller: Navbar,
        controllerAs: "vm",
        replace: true,
        restrict: "AE",
        template: require("./navbar.html"),
    };
}

angular
    .module("app")
    .directive("navbar", navbar);

navbar.html

<div>
    <div class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" ui-sref="home">Js Algorithm Flashcards</a>
        </div>

        <div class="collapse navbar-collapse" id="js-navbar-collapse">

          <ul class="nav navbar-nav">
            <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
            <li ui-sref-active="active"><a ui-sref="dashboard">Dashboard</a></li>
            <li ui-sref-active="active"><a ui-sref="register">Register</a></li>
            <li ui-sref-active="active"><a ng-href="/">About</a></li>
            <li ui-sref-active="active"><a ng-href="/">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
</div>

Answer 1

问题（正如您已经发现的那样）是方法 evaluateIt 不能绑定到 vm，因为它被定义为 static 方法。

但是当navbar 组件包含在register 模板中时，为什么sendIt 按钮不起作用？ 因为这两个组件都具有非隔离作用域，并且使用相同的别名 vm 破坏了作用域。