ng-click和ng-submit不起作用

i have a angular application with phonegap where i have a login form and login controller.

我有一个带有phonegap的角度应用程序,我有一个登录表单和登录控制器。

The problem is that the ng-submit doesn't work. Normaly the submit call the fonction formConnexion() but nothing happens. So, i tried with just a alert, but it's the same result...

问题是ng-submit不起作用。 Normaly提交调用函数formConnexion()但没有任何反应。所以,我尝试了一个警报,但结果相同......

After i tried with a ng-click and same result. Then, i wanted try to call a sample variable in the scope in the template ($scope.test) and it doesn't display. And the console.log('salut!!') doesn't dispaly when i am on the login page.

在尝试了ng-click和相同的结果之后。然后,我想尝试在模板($ scope.test)的范围内调用一个示例变量,它不会显示。当我登录页面时,console.log('salut !!')并不显示。

Which made me think that my controller it doesn't associate to the template. But i have the ng-controller in my div with the good name controller.

这使我认为我的控制器不与模板关联。但是我的div中有ng-controller和好名字控制器。

Then, i thought that angular it's was worse installing but no because the other directives work (ng-if, ng-src, ...)

然后,我认为这是更糟糕的安装,但没有,因为其他指令工作(ng-if,ng-src,...)

So, if you have a idea to solve this problem, I do not mind :)

所以,如果你有想法解决这个问题,我不介意:)

here the code for the template :

这里是模板的代码:

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>

and here the controller :

在这里控制器:

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 () {...}

  });

and here my app.js : app.js

在这里我的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: '/'
              });

  }
]);

Thank you in advance !

先感谢您 !

4 个解决方案

#1

Following from my comment Try something like this:

以下是我的评论尝试这样的事情:

1. Create a Controller file & a controller within it Create a angular

   在其中创建一个Controller文件和一个控制器创建一个角度

2. module within the controller file

   控制器文件中的模块

Create a controller.js file then create a angular module see code below:

创建一个controller.js文件然后创建一个角度模块,见下面的代码:

 //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)

  };
});

Then within your HTML file call the function on-Click see code below:

然后在你的HTML文件中调用函数on-Click看下面的代码:

Note: Don't forget to add the controller you created into your HTML code. I usually add it in the body tag

注意:不要忘记将您创建的控制器添加到HTML代码中。我通常将它添加到body标签中

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

See a live example here:

在这里查看一个实例:

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

Also a note: ng-click is mostly used for any click events you are trying to perform within your angular app but ng-submit is mostly used when working with a HTML form submission.

另请注意:ng-click主要用于您尝试在角度应用中执行的任何点击事件,但ng-submit主要用于处理HTML表单提交时。

#2

Use ng-submit in you form as:

在您的表单中使用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>

#3

I found the error. It was caused by having 2 controllers with the name 'LoginCtrl'. It was a stupid copy/paste error.

我发现了错误。这是由于有两个名为“LoginCtrl”的控制器引起的。这是一个愚蠢的复制/粘贴错误。

#4

I have created one working code for the above question for 4 different type of HTML element, for complete code please follow the below URL -

我为4个不同类型的HTML元素创建了一个上述问题的工作代码,完整代码请按照以下URL -

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>