ng-click和ng-submit不起作用

Question

我有一個帶phonegap的角度應用程序，其中有一個登錄表單和登錄控制器。

問題是ng-submit不起作用。 通常，提交者會調用函數formConnexion（），但是什么也不會發生。 所以，我嘗試了一個警報，但是結果是一樣的...

在我嘗試了ng-click和相同的結果之后。 然后，我想嘗試在模板（$ scope.test）的作用域中調用一個示例變量，它不會顯示。 當我在登錄頁面上時，console.log（'salut !!'）不會消失。

這讓我認為我的控制器與模板沒有關聯。 但是我的div中有ng-controller和好名字的controller。

然后，我以為角度安裝會更糟，但沒有，因為其他指令有效（ng-if，ng-src等）

因此，如果您有解決此問題的想法，我不在乎:)

這里是模板的代碼：

login.html

<div class="row jumbotron" style="margin:10px" ng-controller="LoginCtrl">
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
        <h1>{{ test }}</h1>
        <form class="form-horizontal" ng-submit="alert('alert')">
            <div class="form-group">
                <label for="login" class="control-label">Login</label>
                <input type="text" name="login" class="form-control" ng-model="formData.login">
            </div>
            <div class="form-group">
                <label for="password" class="control-label">Password</label>
                <input type="password" name="password" class="form-control" ng-model="formData.password">
            </div>
            <button type="submit" class="btn btn-md btn-success">Connexion</button>
        </form>
        <a href="" ng-click="alert('lalalala')">click</a>
        <img ng-src="images/accueil.png" class="accueil img-responsive">
    </div>
</div>

這是控制器：

login.js

'use strict';

appStat.controller('LoginCtrl', function ($scope, $rootScope, $http, $location) {
    console.log("salut!!");
    $scope.formData   = {};
    $scope.test = "test";
    $scope.toto = function() { alert('alert'); };

   /**
    * Connect l'user
    */
    $scope.formConnexion = function () {...}

  });

這是我的app.js： app.js

'use strict';

var appStat = angular.module('posStatsPhoneGap', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ngResource',
    'ui.bootstrap',
    'ngMessages',
    'ngAnimate',
    'ngAria',
    'ngTouch',
    'picardy.fontawesome'
])
    .config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {

        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel):/);
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|tel):/);

        $routeProvider
            .when('/', {
                templateUrl: 'views/login.html',
                controller: 'LoginCtrl'
              })
            .when('/main', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
              })
            .when('/stat', {
                templateUrl: 'views/stat.html',
                controller: 'StatCtrl'
              })
              .otherwise({
                redirectTo: '/'
              });

  }
]);

先感謝您！

Answer 1

根據我的評論嘗試以下操作：

創建一個控制器文件並在其中創建一個控制器
控制器文件中的模塊

創建一個controller.js文件，然后創建一個angular模塊，請參見下面的代碼：

 //Within your controller.js file 
  var myApp = angular.module('myApp', []);
   myApp.controller('myController', function($scope, $http){

  $scope.Data = "Alert Alert";

// Create a function within the scope of the module
 $scope.myFunc = function(){

      alert($scope.Data)

  };
});

然后在您的HTML文件中，調用函數on-Click，請參見下面的代碼：

注意：不要忘記將創建的控制器添加到HTML代碼中。 我通常將其添加到body標簽中

<body ng-controller="myController">
   <button ng-click="myFunc()">Make Request Button</button>
</body>

在此處查看實時示例：

http://plnkr.co/edit/sQ0z7TlyWv5fM5XyfujK?p=preview

還要注意： ng-click通常用於嘗試在angular應用程序中嘗試執行的任何單擊事件，但是ng-submit通常用於處理HTML表單提交時。

Answer 2

在表單中使用ng-submit如下：

<form ng-submit="submit()">

 function Ctrl($scope) { $scope.list = []; $scope.text = 'hello'; $scope.submit = function () { if ($scope.text) { $scope.list.push($scope.text); $scope.text = ''; } }; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div ng-controller="Ctrl"> <form ng-submit="submit()">Enter text and hit enter: <input type="text" ng-model="text" name="text" /> <input type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre> </form> <button ng-click="submit()">Submit 2</button> </div> </div>

Answer 3

我發現了錯誤。 這是由於具有2個名稱為'LoginCtrl'控制器引起'LoginCtrl' 。 這是一個愚蠢的復制/粘貼錯誤。

Answer 4

我針對上述問題為4種不同類型的HTML元素創建了一個有效的代碼，有關完整的代碼，請遵循以下網址-

http://plnkr.co/edit/Tm2Rtbt3xsv4pKzcPQCw?p=preview

<body ng-controller="ExampleController">
    <button ng-click="setButton()">set button</button>
    <div content="snippetContentFirst"></div>
    <div content="snippetContentSecond"></div>
    <div content="snippetContentThird"></div>
    <div>
        <ul content="snippetContentFour"></ul>
    </div>
</body>

ng-click和ng-submit不起作用

問題描述

4 個解決方案

解決方案1
0 已采納 2015-10-20 14:52:38

解決方案2
0 2015-10-20 14:56:43

解決方案3
0 2015-10-20 15:51:34

解決方案4
0 2015-11-16 12:06:27

ng-click和ng-submit不起作用

問題描述

4 個解決方案

解決方案1 0 已采納 2015-10-20 14:52:38

解決方案2 0 2015-10-20 14:56:43

解決方案3 0 2015-10-20 15:51:34

解決方案4 0 2015-11-16 12:06:27

解決方案1
0 已采納 2015-10-20 14:52:38

解決方案2
0 2015-10-20 14:56:43

解決方案3
0 2015-10-20 15:51:34

解決方案4
0 2015-11-16 12:06:27