我有一个带有phonegap的angular应用程序，其中我有一个登录表单和登录控制器。
问题是ng-submit不起作用。通常，submit会调用formConnexion()函数，但什么也没发生。所以，我尝试了一个警报，但结果是一样的…
在我尝试了ng-click和相同的结果之后。然后，我想尝试在模板($scope.test)的范围内调用一个示例变量，它不显示。并且console.log('salut!!')在登录页面上不显示。
这让我认为我的控制器它没有关联到模板。但我有一个ng-controller在我的div好名字controller。
然后，我认为angular会更糟糕，但没有，因为其他指令工作(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: '/'
});
}
]);
提前感谢!
根据我的评论试试这样做:
-
创建控制器文件&创建一个角
控制器文件中的 模块
创建一个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 =
预览另一个注意: ng-click主要用于任何点击事件，你试图在你的angular应用程序中执行，但ng-submit主要用于与HTML表单提交工作。
在表单中使用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>我发现了错误。原因是有2个控制器名称为'LoginCtrl'。这是一个愚蠢的复制/粘贴错误。
我已经为4种不同类型的HTML元素创建了一个工作代码，完整的代码请按照下面的URL -
http://plnkr.co/edit/Tm2Rtbt3xsv4pKzcPQCw?p =
预览<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>