Question

我有从REST API获取访问令牌的以下服务：

var myServices = angular.module('myServices ', ['ngResource']);

myServices .factory('Auth', ['$resource',
  function($resource){    
    return $resource('http://192.168.0.17:3333/login', {}, {
      login: {method:'POST', params: { username: 'user1', password: 'abc123' }, isArray:false}
    });
  }
]);

我定义了以下控制器：

    var myControllers = angular.module('myControllers ', []);

        myControllers.controller('AuthCtrl', ['$scope', 'Auth', function($scope, Auth) {
          $scope.login = function() {
              console.log('Login');
              Auth.login();
            };
        }]);

我的登录表格如下：

<form ng-controller="AuthCtrl">
    <input type="text" name="username" id="username" placeholder="Username" ng-model="username" />
    <input type="password" name="password" id="password" placeholder="Password"  ng-model="userpassword" />
    <button type="submit" ng-click="login();">Login</button>
</form>

单击“登录”按钮时，它不会调用AuthCtrl的login（）函数，我无法找出原因：s

Answer 1

我认为你会对自己感到沮丧。我能够通过删除myControllers声明后的空格来解决这个问题。检查一下：

var myControllers = angular.module('myControllers**YOU HAD A SPACE HERE**', []);

我将其更改为以下内容，并且有效。看起来您的服务会遇到同样的问题。

var myControllers = angular.module('myControllers', []); //no space after the myControllers

SEE MY CODE HERE

Answer 2

所以问题最终成为了一个np-app衍生品。更具体地说，是缺失的衍生我有平常的

<html np-app="myApp">
...
</html>

但是在组织我的代码并按照Google推荐的方式编写代码时，我意识到我实际上已经创建了另一个应用程序。使用myControllers的代码，这是一个命名错误的模块：

var myControllers = angular.module('myControllers ', []);

登录表单是部分的，所以我使用myControllers app指令在表单周围添加了一个div：

<div ng-app="myControllers">
<form ng-controller="AuthCtrl">
    <input type="text" name="username" id="username" placeholder="Username" ng-model="username" />
    <input type="password" name="password" id="password" placeholder="Password"  ng-model="userpassword" />
    <button type="submit" ng-click="login();">Login</button>
</form>
</div>

AngularJS编写得非常非常模块化。你可以有多个应用程序，你的控制器应该只包装它需要的DOM元素，这样如果没有工作，请仔细检查你是否已经向DOM添加了必要的衍生物;）

Answer 3

在角度配置中定义Controller时，可以使用别名。例如：注意：我在这里使用TypeScript

注意Controller，它有一个homeCtrl的别名。

module MongoAngular {

var app = angular.module('mongoAngular', ['ngResource', 'ngRoute','restangular']);

app.config([
    '$routeProvider', ($routeProvider: ng.route.IRouteProvider) => {
        $routeProvider
            .when('/Home', {
                templateUrl: '/PartialViews/Home/home.html',
                controller: 'HomeController as homeCtrl'
            })
            .otherwise({ redirectTo: '/Home' });
    }])
    .config(['RestangularProvider', (restangularProvider: restangular.IProvider) => {
    restangularProvider.setBaseUrl('/api');
}]);
}

以下是使用它的方法......

ng-click="homeCtrl.addCustomer(customer)"

尝试..它可能适合你，因为它对我有用...;）

为什么ng-click没有调用我的控制器功能？

3 个答案: