2014-04-21 2 views
1

나는 각도 $ 범위에 관한 여러 SO 응답을 읽고 그것이이 경우이기 때문에이 JS의 프로토 타입 상속 (What are the nuances of scope prototypal/prototypical inheritance in AngularJS?)Angular ngModel 예제에서 오류가 발생하지 않는 이유는 무엇입니까?

을 따르겠다 것을 의미 일반 오래된 자바 스크립트 객체, 얼마나, 나는 궁금하다 왜 내 예를 들어 다음은 오류가 발생하지 않습니다 :

프로토 타입 상속을 기반으로
<!doctype html> 
<html ng-app='MyApp'> 
<head> 
    <meta charset='utf-8'> 
    <title>Egghead</title> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js'></script> 
    <script> 
    var app = angular.module('MyApp', []); 
    app.controller('MainCtrl', ['$scope', function ($scope) { 

    }]) 
    </script> 
</head> 
<body> 
    <div ng-controller='MainCtrl'> 
    <input type='text' ng-model='data.message'> 
    <p>{{ data.message }}</p> 
    </div> 
</body> 
</html> 

, 여기에 내가 일이 기대하는 내용은 다음과 같습니다

  1. MainCtrl가 호출 될 때, MainCtrl 달러 (A $) 범위 객체를 생성합니다 및 해당보기.
  2. 입력란에 입력 할 때마다 일부 문자열을 $ scope.data.message에 바인딩합니다.
  3. 그러나 이렇게하려면 JavaScript의 첫 번째 단계는 $ scope.data를 확인하는 것입니다.
  4. MainCtrl 함수에는 데이터 속성이 없으므로 rootScope에서 데이터 속성을 찾으려고 시도합니다.
  5. rootscope에는 데이터 속성이 없으므로 $ scope.data가 'undefined'로 확인되어야합니다.
  6. 마지막으로 undefined.message에 할당하려고하면 오류가 발생합니다.

그러나 코드는 행복하게 작동하며 데이터는 올바르게 바인딩됩니다. 왜 누군가가 나를 위해 오류를 던지지 않는지 이해할 수 있습니까?

+1

주석으로이 떠난다. 내가 읽은 것부터 오류를 던질 때까지 말이다. undefined.message에 할당하려고 시도하는 대신 오류가 발생하여 각도가 정의되지 않았 음을 감지하고 범위에서 해당 각도를 만든 다음 값을 할당합니다. –

답변

1

내 원래의 코멘트를 만들었지 만,

"ngModel는 현재 범위에 식을 평가하여 주어진 속성에 바인딩하려고합니다 ... 때문에 문서를 확인해 본 결과,이다. 속성이이 범위에 이미 없으면 암시 적으로 만들어지고 범위에 추가됩니다. "

따라서 해당 속성이 없으면 값을 할당 할 때 만들어집니다.

SRC : 나는 좀 더 기술적 인 응답이 확실하기 때문에 here

+0

문서로 다시 안내해 주셔서 감사합니다! 이것에 대한 설명이 있지만 그 다음에 내가 가진 후속 질문은 'data'속성이 MainCtrl의 $ scope 객체 또는 rootScope 객체에 할당되는지 여부입니다. Angular가 스코프 체인을 걷고 있으며 마지막 스코프 객체가 rootScope 객체 인 것처럼 보이기 때문에 확실하지 않은 이유가 있습니다. – wmock

+1

데이터는 현재 사용중인 컨트롤러의 범위에 바인딩되므로이 예제에서는 MainCtrl을 사용합니다.나는 문서가 'CURRENT SCOPE의 표현식을 평가함으로써'라고 말하기 때문에 속성이 이미이 범위에 존재하지 않는다면 'rootscope가 아닌 현재의 범위를 나타냅니다.'라고 계속 말합니다. mainCtrl의 스코프 –

+0

도움을 주신 Tyler에게 감사드립니다! – wmock

0

두 가지 데이터 바인딩 지시문이므로 실패하지 않는 이유는 ngModel입니다. 당신이 다른 게시물에이에 대한 자세한 내용을보실 수 있습니다 :

What's the difference between ng-model and ng-bind

그러나이 동작을 설명하는 간단한 방법은 변수가 ngModel 내에서 사용되는 경우도 심지어 경우 범위의 일부로 선언하는 것입니다 존재하지 않습니다. 나는 100 %가 아니므로

관련 문제