按钮单击时未激活角度控制器中的功能

时间:2015-01-27 21:41:43

标签: javascript angularjs

我正在尝试与Angular联系我。现在,我有一些输入字段,一个按钮和一个角度应用程序作为页面中的脚本,试图让事情变得尽可能简单。我试图确保事情正在彼此交谈所以我只是在我的角度控制器中放入一个console.log,我认为当我点击按钮时应该打印到控制台。但是,它每次都会重新加载页面。

以下是显示此问题的代码

HTML:

  <body ng-app="contactApp">

    <div class="container">
      <div class="row">
        <div class="col-sm-8 blog-main">

        <!-- Input Fields for contact form -->
          <form ng-controller="ContactCtrl" class="form-horizontal" role="form" ng-submit="submit(name, email, message)">
            <div class="form-group">
              <label class="col-sm-2 control-label">Name</label>
                <div class="col-sm-4">
                  <input class="form-control" type="text" placeholder="Name" ng-model="info.name">
                </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-4">
                  <input class="form-control" type="email" placeholder="Email" ng-model="info.email">
                </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Message</label>
                <div class="col-sm-4">
                  <input class="form-control" type="text" placeholder="Place Message Here" ng-model="info.text">
                </div>
            </div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-success" type="submit">Contact Me</button>
              </div>
            </div>
          </form>
        </div><!-- /.blog-main -->
      </div><!-- /.row -->
    </div><!-- /.container -->

JS:

var contactApp = angular.module('contactApp', [])
.controller('ContactCtrl', function ($scope, $http){
  $scope.submit = function (name, email, message){
    console.log('contact with controller')
    }
  })

大多数代码只是创建HTML表单,请参阅底部的角度应用程序。

2 个答案:

答案 0 :(得分:1)

ooo如此接近;)你在ng-controller =&#34; contactCtrl&#34;中有一点错字。 != .controller(&#39; ContactCtrl&#39;)看看你的第一个字母。

答案 1 :(得分:0)

我使用Firefox作为我的浏览器,我在他们的开发者控制台中寻找输出。它出现在firebug控制台中。我仍然不知道为什么它没有出现在常规控制台中,但我将来也会查看firebug。我接受了btm1的答案,因为他指出了我的拼写错误,当我开始使用萤火虫时,一切都有效。