Why is ng-click not calling my controller function

2020-07-18 11:33发布

站内问答 / 前端开发
1814 3 6

I have the following service for getting an access token from my 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}
    });
  }
]);

And I have the following controller defined:

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

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

My login form is as follows:

<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>

When I click the "Login" button it doesn't call the login() function of the AuthCtrl and I can't figure out why :s

标签： angularjs
举报
3条回答
虎瘦雄心在
2楼-- · 2020-07-18 11:49

So the problem ended up being an np-app derivative. More specifically a missing derivative. I had the usual

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

But when organizing my code and writing it the way that Google recommends, I realized that I had actually created another app. With this code for myControllers, which is an ill named module:

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

The login form is in a partial so I added a div around the form with the myControllers app directive:

<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 is written to be very VERY modular. You can have multiple apps, your controllers should only wrap the DOM elements that it needs to so if something isn't working double-check that you've added the necessary derivatives to the DOM ;)

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
3楼-- · 2020-07-18 11:55

I think that you are going to be upset with yourself. I was able to fix this by removing the space after the myControllers declarations. Check this:

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

I change it to the following, and it worked. It looks like you are going to have the same issue with your service. 

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

SEE MY CODE HERE

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2020-07-18 12:04

You can use alias when defining Controller in your angular configuration. For example: NOTE: I'm using TypeScript here

Just take note of the Controller, it has an alias of 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');
}]);
}

And here's the way to use it...

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

Try it.. It might work for you as it worked for me... ;)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)