AngularJS 컨트롤러 $ scope가 ng-if 지시문 내에서 작동하지 않습니다.

debugcn 에 게시 Dev

알바로 페드라 자

로그인 양식이 있지만 어떤 이유로 데이터가 HTML과 컨트롤러 사이에 바인딩되지 않습니다. 이것은 내 코드입니다.

home.html

<div ng-if="loggedIn">
    <h2>Welcome!</h2>
    <p>Some other welcome content...</p>
</div>

<form ng-if="!loggedIn">
    <input type="text" placeholder="Username" ng-model="username">
    <input type="password" placeholder="Password" ng-model="password">
    <button type="submit" data-ng-click="login()">Login</button>
</form>

참고 : 레이블, 클래스 및 ID는 간결함을 위해 생략되었습니다.

controller.js

myapp.controller('HomeController', ['$scope', '$log', function(scope, log) {
    scope.loggedIn = false;
    // ADDED CODE HERE

    scope.login = function() {
        // Dummy validation
        if(scope.username == 'admin' && scope.password == 'admin') {
            scope.loggedIn = true;
        };
        log.log('username: ' + scope.nombreUsuario);
        log.log('password: ' + scope.password);
        log.log('is logged in: ' + scope.loggedIn);
    };
}]);

config.js

myapp.config(['$locationProvider', '$routeProvider', function(locationProvider, routeProvider) {
    // Remove default '!' from URL
    locationProvider.hashPrefix('');

    routeProvider
    .when('/', {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })
    // ... some other .when ...
    .otherwise({
        redirectTo: '/'
    });
}]);

이것을 실행하면 login함수 의 콘솔 출력은 다음과 같습니다.

username: undefined
password: undefined
is logged in: false

그러나 //ADDED CODE HERE섹션 의 컨트롤러에 다음을 추가하면

scope.username = 'admin';
scope.password = 'admin';

콘솔은 다음을 제공합니다.

username: admin
password: admin
is logged in: true

즉, 제대로 작동하고 있습니다. 그래서 질문은 : 왜 내 뷰 ( ng-model="...")가 컨트롤러의 범위에 바인딩되지 않습니까? 내가 여기서 뭘 놓치고 있니?

귀하의 답변에 미리 감사드립니다.

린

그냥 액세스 $parent범위를 $parent.username, $parent.password그리고 당신은이처럼 잘 될 것입니다 데모 바이올린 .

같은 일부 지시문 ng-if은 하위 범위를 생성하므로 상위 범위에 액세스해야합니다. (Thx @FrankModica). 예를 들어 당신이 사용하는 경우 ng-show또는 ng-hide사용자가 액세스 할 필요가없는 $parent범위 ( 데모 바이올린 하는 용도 ng-show).

<form ng-if="!loggedIn">
    <input type="text" placeholder="Username" ng-model="$parent.username">
    <input type="password" placeholder="Password" ng-model="$parent.password">
    <button type="submit" data-ng-click="login()">Login</button>
</form>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-19

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사