Question

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

问题是ng-submit不起作用。 Normaly提交调用fonction formConnexion（）但没有任何反应。所以，我尝试了一个警报，但它的结果相同......

尝试使用ng-click和相同的结果后。然后，我想尝试在模板（$ scope.test）的范围内调用一个示例变量，它不会显示。当我登录页面时，console.log（＆＃39; salut !!＆＃39;）并不显示。

这使我认为我的控制器并没有与模板相关联。但是我的div中有ng-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文件＆amp;其中的控制器创建一个角度
控制器文件中的模块

创建一个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)

  };
});

然后在您的HTML文件中调用该函数on-Click请参阅下面的代码：

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

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

在此处查看实时示例：

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

另请注意： ng-click主要用于您在角度应用中尝试执行的任何点击事件，但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

我发现了错误。这是因为有两个名为'LoginCtrl'的控制器。这是一个愚蠢的复制/粘贴错误。

Answer 4

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

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

<local:VtlCustomButton Style="{StaticResource myButtonStyle}" />

ng-click和ng-submit不起作用

4 个答案: