ui-router와의 액세스 범위 바인딩

Question

ui-router가있는 AngularJS 응용 프로그램에 로그인 경로와 페이지가 있습니다. ui-view로로드 된 login.html 부분에는 credentials.username 및 credentials.password에 바인드 된 사용자 이름 및 비밀번호 입력이있는 로그인 페이지가 있습니다. LoginCtrl에서 해당 자격 증명에 액세스하려는 경우 '정의되지 않은 사용자 이름'오류가 발생합니다.

app.js :

var myApp = angular.module('myApp', ['ui.router']); 

myApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider.state('login', { 
     url: '/login', 
     templateUrl: '/partials/login.html', 
     controller: 'loginCtrl' 
    }); 
}); 

loginCtrl.js :

<input type='text' name='username' ng-model='credentials.username' placeholder='Username...' autoFocus> 
<input type='password' name='password' ng-model='credentials.password' placeholder='Password...'> 

: 내 파셜에서

myApp.controller('loginCtrl', function($rootScope, $scope) { 
    $scope.credentials.username = 'Test'; 
}); 

/login.html 나는 2 개 개의 입력과 간단한 로그인 폼을

여기서 autoFocus는 사용자 이름 필드를 자동으로 집어 넣기위한 사용자 지정 명령입니다. 양식이 잘 표시되지만 내 컨트롤러에서 내 바인딩에 계속 액세스 할 수 없습니다.

내가 뭘 잘못하고 있니?

Answer 1

"정의되지 않은 사용자 이름"오류가 발생하는 이유는 $scope.credentials이 정의되지 않았기 때문에 $scope.credentials.username에 값을 지정하려고하기 때문입니다.

이 일을하는 방법은 먼저 정의하는 것입니다 :

$scope.credentials = {}; 
$scope.credentials.username = "someDefaultUsername"; 

바인딩이 점으로 잘 작동 것 - 사실, 그것 때문에 얼마나 원형 범위 상속 일반적인 오류에 권장되는 방법입니다 (하지만이 점 옆) :

<input ng-model="credentials.password" type="password"> 

오프 주제

: 낙타 케이스와 지시어, autoFocus처럼, HTML에서 하이픈 이름으로 비정규 할 필요가, 그렇지 않으면 찾을 수없는 것 Angular의 컴파일러.

<input ng-model="credentials.username" auto-focus>