<div ng-controller="Auth" ng-init="isAuth()"> <div ng-if="isAuthUser == false"> <form> <input type="text" ng-model="login"> <input type="password" ng-model="password"> <button type="button" ng-click="authenfication()">отправить</button> </form> </div> function Auth($scope, $http, $location, $rootScope) { $scope.authenfication = function () { console.log($scope.login); }; } Memoris.controller('Auth', ['$scope', '$http', '$location', '$rootScope', Auth]);

Why does not display $scope.login ???

  • I don't see the ng-app directive, or the bootstrap manual call - Grundy
  • ng-app tcnm higher in code - ruslik
  • provide a minimal reproducible example , for example by adding a snippet to the question - Grundy
  • in a nutshell: ng-if creates its own Osprey, and the login and password fields are added to it, and not to the Auth - Grundy controller's scop
  • well, the auth controller is the parent for ng-ifb, so the variables should be available - ruslik

1 answer 1

The reason for the problem is that ng-if creates a child skop.

How do nested osprey work?

Creates a child Osprey, and the parent is indicated to him as a prototype.

When output, they work as follows: the field in the current osprey is checked, if it is not there, the field with the same name in the prototype is checked. Therefore, when outputting, the values ​​of the parent osprey are shown.

When entering, the behavior is slightly different: the field in the current osprey is checked, and if it is not there yet, it is created and initialized with the desired value.

Thus, when using ng-model it is important to understand what works and how.

This problem can be solved in several ways, for example, instead of ng-if use a directive that does not create an OSP.

But usually, it is recommended to use dot-rule : when binding in the ng-model directive, there should always be a period in the expression.

In this case, in the auth controller, a field can be added to the skop, for example, user , and the login, password fields are added to it.

For example:

 <div ng-controller="Auth" ng-init="isAuth()"> <div ng-if="isAuthUser == false"> <form> <input type="text" ng-model="user.login"> <input type="password" ng-model="user.password"> <button type="button" ng-click="authenfication()">отправить</button> </form> </div> function Auth($scope, $http, $location, $rootScope) { $scope.user = {}; $scope.authenfication = function () { console.log($scope.login); }; }