visibility areas angular js

[Kadyn]

<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 doesn't it turn out? $scope.login? ?

[jules]

The reason for the problem is that ng-if creates a subsidiary cop.

How are the implanted scopes working?

There's a subsidiary cop, and the parent is listed as a prototype.

When they are decommissioned, they work as follows: the field in the current scope, if not, is checked with the same name in the prototype. Therefore, when it comes to withdrawal, the meanings of the parent scope are shown.

In the case of entry, the conduct is a little different: the field is checked in the current scope and, if not yet, the field is created and initiated.

Thus, when used ng-model It's important to understand what works.

There are several ways in which this problem can be addressed, for example, instead ng-if Use a directive that does not create a cop.

But usually, they recommend using dot-rule: Binding in directive ng-model in terms should always be the point.

In this case, the counteraller auth a field may be added to the shore, for example, user, and I'm gonna put the fields in it. login, password♪

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

};

}