AngularJS 控制器不是 IBM MobileFirst 中的功能

Question

AngularJS controller not a function in IBM MobileFirst 是我遇到的错误。我在 Stack Overflow 上遇到了很多类似的问题，但没有任何帮助。

// **************** app.js ***************

var app = angular.module('myApp',['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
 
 $urlRouterProvider.otherwise('/login');
 
 $stateProvider
  .state('login',{
   url:'/login',
   templateUrl:'view/login.html',
   controller:'loginController'
  });
 
});


// **************** login.js ***************


app.controller('loginController',function($scope){
 
 $scope.login = function(){
  $scope.userName = angular.element('#usrName').val();
  $scope.password = angular.element('#pass').val();
  console.log($scope.userName, $scope.password);
  
  
  
  $scope.loginProcedure ={
    procedure:'login',
    adaptor:'SQL',
    parameters:[$scope.userName, $scope.password]
  };
  
  WL.Client.invokeProcedure($scope.loginProcedure, function(){
   onSuccess: loginSuccess,
   onFailure: loginFailure
  });
  
  $scope.loginSuccess = function()
  {
   alert('success');
  };
  
  $scope.loginFailure = function()
  {
   alert('failed');
  };
 }
 
});

<!-- INDEX.html -->

<!DOCTYPE HTML>
<html>
     <head>
      <meta charset="UTF-8">
      <title>AB</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
      <!--
       <link rel="shortcut icon" href="images/favicon.png">
       <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
      -->
      <link rel="stylesheet" href="css/main.css" />
      <link rel="stylesheet" href="css/bootstrap.min.css" />
      <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
      
      <script>window.$ = window.jQuery = WLJQ;</script>
     </head>
     <body ng-app="myApp">
      <!--application UI goes here-->
      
      <div id="view" ui-view></div>
      
      <script src="js/initOptions.js"></script>
      <script src="js/main.js"></script>
      <script src="js/messages.js"></script>
      <script src="library/jquery.min.js"></script>
      <script src="library/angular.1.4.9.js"></script>
      <script src="library/angular-ui-router.min.js"></script>
      <script src="library/bootstrap.min.js"></script>
      <script src="controller/app.js"></script>
      <script src="controller/login.js"></script>
     </body>
</html>

<!-- Login.html --> 

<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">

 <!-- Login Box Start -->

 <div class="panel panel-primary">
  <div class="panel-heading">Login</div>
  <div class="panel-body">
   <form class="form-group" name="lgForm">
    <input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
    <input type="password" class="form-control" id="pass" ng-modal="pass" required />
    <input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
   </form>
  </div>
 </div>
 
 <!-- Login Box End -->
 
 <!--  error Modal start -->
 
 <div class="modal" role="modal" id="errorPopup">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">Error</div>
    <div class="modal-body"></div>
   </div>
  </div>
 </div>
 
 <!--  error Modal End -->

</div>

Answer 1

您在 html 以及路由配置中指定了 loginController。我不确定这是否是问题的原因，但两者都没有必要。删除其中一个。

换句话说，从下面

消除控制器：'loginController'

$stateProvider
    .state('login',{
        url:'/login',
        templateUrl:'view/login.html',
        controller:'loginController'
    });

或删除：ng-controller="loginController" 来自：

<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">

同样，无关，但我怀疑这两行：

$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();

做你想做的事。 angular.element 的目的是将元素包装为 jquery 元素。我怀疑您想在此处使用 document.getElementById 来获取对项目的引用。但是，您在这里使用的是 ngModel，因此如果您使用一致的拼写，那么 none 应该是必需的。（在一个地方你有 userName 而在另一个地方有 usrName。）

Answer 2

问题是适配器拼写错误

 /* wrong one */

$scope.loginProcedure ={
    procedure:'login',
    adaptor:'SQL',
    parameters:[$scope.userName, $scope.password]
  };


/*write one */

$scope.loginProcedure ={
    procedure:'login',
    adapter:'SQL',
    parameters:[$scope.userName, $scope.password]
  };

AngularJS 控制器不是 IBM MobileFirst 中的功能

AngularJS controller not a function in IBM MobileFirst

angularjs

ibm-mobilefirst