Angularjs按鈕單擊與用戶界面路由器不工作

嗨，我正在開發角度js應用程序。我正在使用ui路由技術。我在按鈕點擊事件中遇到問題。以下是我的main.js文件。Angularjs按鈕單擊與用戶界面路由器不工作

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' 
          }); 
         }); 
       });

下面是我forgotpassword.html

<div class="container"> 
    <div ui-view></div> 
</div>

我在這裏注入ResetPassword.html。以下是我的ResetPassword.html

<div class="button-container"> 
         <input type="submit" value="Submit" id="input-submit" data-ng-click="ResetPassword()"> 
    </div>

上面的按鈕不起作用。這是我的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

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不工作，我沒有得到錯誤也。任何幫助，將不勝感激。謝謝。

來源

2017-04-06 Niranjan Godbole

很難找到什麼去哪裏..會更容易幫助，如果一個小提琴/ plunker是做出來的這個 – tanmay

你的依賴注入順序是錯誤的。試試這個：

(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

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; 
     }); 
    } 
});

來源

2017-04-06 12:36:25 kaushlendras

謝謝。但現在我越來越無法讀取屬性'ResetPassword'undefined –

我面臨錯誤var servCall = $ ResetPasswordService.ResetPassword（sub）; –

註冊您的服務如下： angular.module（'RoslpApp'）。service（'ResetPasswordService'）。我正在更新我的答案 – kaushlendras

更改您ResetPassword.html代碼如下：

<div class="button-container"> 
    <input type="button" value="Submit" id="input-submit" ng-click="ResetPassword()" /> 
</div>

此外，編輯您控制器的問題是由於不正確依賴訂購。你應該改寫爲：

(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)); 
     }); 
    } 
}]); 
})();

來源

2017-04-06 12:07:41

希望第一警報得到提示（alert（「Works」）;） –

如果刪除$ ResetPasswordService我的代碼工作正常。 –

是的。角度沒有提供這樣的服務。雖然，您創建自己的服務（用於進行http調用），並可以在控制器中使用它。 –

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>

有可能同時傳遞的依賴要problme控制器將參數傳遞給回調函數。我用一個參數嘗試簡單的方法。它適用於我。檢查它

來源

2017-04-06 12:15:38

更改您的代碼，如下所示。您的訂單和參考是錯誤的。

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)); 
      }); 
     } 
    }]);

來源

2017-04-06 12:17:40

謝謝，我正在接受以下錯誤[ $ injector：unpr]未知提供者：$ ResetPasswordServiceProvider < - $ ResetPasswordService –

服務名稱不正確，您需要傳遞實際名稱。該死的夥計比我快20秒回答^^ – Groben

sho w你的服務代碼，你有沒有在索引頁 –

我覺得你的論點是錯誤的，試圖將其更改爲這樣的事情（對應參數）：

[ 
    '$rootScope', 
    'ResetPasswordService', 
    '$scope', 
    '$translatePartialLoader', 
    '$translate', 
    function ($rootScope, $ResetPasswordService, $scope, $translatePartialLoader, $translate){ 
     [...] 
    } 
]

來源

2017-04-06 12:18:00 Groben

Angularjs按鈕單擊與用戶界面路由器不工作

回答

相關問題