ui路由器的AngularJS按钮单击不起作用
[英]Angularjs button click with ui router is not working
问题描述
Hi I am developing angular js application. 
嗨，我正在开发angular js应用程序。 I am using ui-routing technique. 我正在使用ui路由技术。 I am facing issues in button click event. 我在按钮点击事件中遇到问题。 Below is my main.js file. 下面是我的main.js文件。
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
$stateProvider.state('ForgotPassword', {
url: '/ForgotPassword',
templateUrl: 'ForgotPassword/ForgotPassword.html',
controller: 'ForgotPassword'
});
$stateProvider
.state('ForgotPassword.ResetPassword', {
url: '/ResetPassword',
templateUrl: 'ForgotPassword/ResetPassword.html',
controller: 'ResetPassword'
});
});
});
Below is my forgotpassword.html 以下是我的forgotpassword.html
<div class="container">
<div ui-view></div>
</div>
Here i am injecting ResetPassword.html. 在这里，我正在注入ResetPassword.html。 Below is my ResetPassword.html 以下是我的ResetPassword.html
<div class="button-container">
<input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()">
</div>
Above button does not work. 上方按钮不起作用。 This is my Resetpasswordcontroller. 这是我的Resetpasswordcontroller。
(function () {
angular.module('RoslpApp').controller('ResetPassword', ['$rootScope', '$translatePartialLoader', '$translate', function ($ResetPasswordService, $scope, $translatePartialLoader, $translate) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
})();
Resetpasswordservice.js Resetpasswordservice.js
app.service("ResetPasswordService", function ($http, $state) {
alert("aaa");
this.ResetPassword = function () {
var url = '/api/projects/7';
return $http.post(url).then(function (response) {
return response.data;
});
}
});
$scope.ResetPassword is not working and i am not getting error also.
$ scope.ResetPassword不起作用，我也没有收到错误。 Any help would be appreciated. 任何帮助，将不胜感激。 Thank you. 谢谢。
5 个解决方案
解决方案1
2 2017-04-06 12:18:00
I think your arguments are wrong, try to change it to something like this (corresponding arguments): 我认为您的论点是错误的，请尝试将其更改为以下内容（对应的论点）：
[
'$rootScope',
'ResetPasswordService',
'$scope',
'$translatePartialLoader',
'$translate',
function ($rootScope, $ResetPasswordService, $scope, $translatePartialLoader, $translate){
[...]
}
]
解决方案2
1 2017-04-06 12:15:38
var myApp = angular.module("myApp", []); myApp.controller("myController", ['$rootScope' , function( $scope){ $scope.ResetPassword = function () { var sub = { mobilenumber: $scope.updateID, dob: $scope.updateName }; alert("does not works"); var servCall = ResetPasswordService.ResetPassword(sub); servCall.then(function (data) { }, function (data) { alert(JSON.stringify(data.data)); }); } }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div ng-controller= "myController"> <div class="button-container"> <input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()"> </div> </div> </body>
var myApp = angular.module("myApp", []); myApp.controller("myController", ['$rootScope' , function( $scope){ $scope.ResetPassword = function () { var sub = { mobilenumber: $scope.updateID, dob: $scope.updateName }; alert("does not works"); var servCall = ResetPasswordService.ResetPassword(sub); servCall.then(function (data) { }, function (data) { alert(JSON.stringify(data.data)); }); } }]); <!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div ng-controller= "myController"> <div class="button-container"> <input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()"> </div> </div> </body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller= "myController">
<div class="button-container">
<input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()">
</div>
</div>
</body>
There may be problme while passing the dependency to controller in passing the arguments to callback.I tried simple way with one arguments.its work to me.Check it 将参数传递给回调时将依赖项传递给控制器时可能会出现问题。我尝试了一种方法使用一种参数的简单方法。它对我有用。
解决方案3
1 2017-04-06 12:17:40
Change your code like below. 如下更改代码。 Your order and reference is wrong. 您的订单和参考是错误的。
angular.module('RoslpApp').controller('ResetPassword', ['$rootScope','$scope', '$translatePartialLoader', '$translate','ResetPasswordService', function ($rootScope, $scope, $translatePartialLoader, $translate,ResetPasswordService) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
解决方案4
1 已采纳 2017-04-06 12:36:25
Your dependency injection order is wrong. 您的依赖项注入顺序错误。 Try this one: 试试这个：
(function () {
angular.module('RoslpApp').controller('ResetPassword', ['$scope', '$http', '$translatePartialLoader', '$translate', 'ResetPasswordService', function ($scope, $http, $translatePartialLoader, $translate, ResetPasswordService) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
$http.post('/api/projects/7').then(function (response) {
alert(JSON.stringify(response.data));
}, function (error) {
console.log(error);
});
}
}]);
})();
ResetPasswordService.js ResetPasswordService.js
angular.module('RoslpApp').service("ResetPasswordService", function ($http, $state) {
alert("aaa");
this.ResetPassword = function () {
var url = '/api/projects/7';
return $http.post(url).then(function (response) {
return response.data;
});
}
});
解决方案5
0 2017-04-06 12:07:41
Change you ResetPassword.html code as following: 更改您的ResetPassword.html代码，如下所示：
<div class="button-container">
<input type="button" value="Submit" id="input-submit" ng-click="ResetPassword()" />
</div>
Also, edit you controller as the problem is due to incorrect dependencies order . 另外，请编辑您的控制器，因为问题是由于不正确的依存顺序 。 You should rewrite as: 您应该将其重写为：
(function () {
angular.module('RoslpApp').controller('ResetPassword', ['$ResetPasswordService','$scope', '$translatePartialLoader', '$translate', function ($ResetPasswordService, $scope, $translatePartialLoader, $translate) {
alert("Works");
$scope.ResetPassword = function () {
var sub = {
mobilenumber: $scope.updateID,
dob: $scope.updateName
};
alert("does not works");
var servCall = ResetPasswordService.ResetPassword(sub);
servCall.then(function (data) {
}, function (data) {
alert(JSON.stringify(data.data));
});
}
}]);
})();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.