angularjs의 텍스트 영역 값을 가져올 수 없습니다.

angularjs의 텍스트 영역 값을 가져올 수 없습니다.

여기 my plnkr: http://plnkr.co/edit/n8cRXwIpHJw3jUpL8PX5?p=preview li 요소를 클릭하면 폼이 나타납니다.임의의 문자열을 입력하고 '알림 추가'를 누릅니다.텍스트 영역 텍스트 대신 정의되지 않습니다.

마크업:

<ul>
    <li ng-repeat="ticket in tickets" ng-click="select(ticket)">
         {{ ticket.text }}
    </li>
</ul>
<div ui-if="selectedTicket != null">
     <form ng-submit="createNotice(selectedTicket)">
        <textarea ng-model="noticeText"></textarea>
        <button type="submit">add notice</button>
    </form>
</div>

JS 부품:

$scope.createNotice = function(ticket){
   alert($scope.noticeText);
}

를 지정하면 'syslog'가 반환됩니다.angular-ui의 ui-if를 사용하면 이 기능이 작동하지 않는 것을 알 수 있었습니다.이게 왜 안 되는지 아는 거 있어?어떻게 고치죠?

문제는 UI-if 부분에 있습니다.Angular-ui는 디렉티브 내의 모든 것에 대해 새로운 스코프를 작성하기 때문에 부모 스코프에 액세스하려면 다음과 같은 작업을 수행해야 합니다.

<textarea ng-model="$parent.noticeText"></textarea>

대신

<textarea ng-model="noticeText"></textarea>

이 문제는 이 시스템을 사용하지 않을 때 발생하였습니다.ng-if텍스트 영역 요소를 둘러싼 요소에 대한 지시문입니다.매튜의 해법은 맞지만, 그 이유는 다른 것 같다.그 문제를 찾아보면 이 게시물을 가리키고 있기 때문에 공유하기로 했습니다.

Angular를 보면JS 매뉴얼은 https://docs.angularjs.org/api/ng/directive/textarea에서 확인할 수 있으며, Angular는 다음과 같은 자체 디렉티브를 추가합니다.<textarea>기본 HTML을 "덮어쓰기"합니다.textarea요소.이것이 모든 혼란을 야기하는 새로운 범위입니다.

다음과 같은 변수가 있는 경우

$scope.myText = 'Dummy text';

컨트롤러에 접속하여textarea이런 요소

<textarea ng-model="myText"></textarea>

AngularJS는 지시어 범위에서 해당 변수를 찾습니다.그것은 그곳에 없고 그래서 그는 $parent까지 걸어 내려갔다.변수는 여기에 있고 텍스트는 에 삽입됩니다.textarea. 의 텍스트를 변경할 때textarea, Angular는 부모 변수를 변경하지 않습니다.대신 디렉티브의 범위에 새로운 변수가 생성되어 원래 변수는 갱신되지 않습니다.를 바인드하면textareaMathew가 제안한 바와 같이 Angular는 항상 올바른 변수에 결합하며 문제가 사라집니다.

<textarea ng-model="$parent.myText"></textarea>

이 질문으로 인해 다른 사람들이 이 질문을 받고 "WTF, 나는 내 경우 ng-if 또는 다른 지시를 사용하지 않을 거야!"라고 생각할 수 있기를 바랍니다.처음 여기 왔을 때처럼).

업데이트: controller-as 구문 사용

오래전에 이것을 추가하고 싶었지만 그것을 할 시간이 없었다.이것은 빌딩 컨트롤러의 현대적인 스타일이며 사용되어야 합니다.$parent위에 있는 것.방법과 이유를 알아보려면 계속 읽어보십시오.

AngularJS에서는 AngularJS 1.2를 하는 할 수 .$scope마크업에서 할 수 .이것은, HTML 마크업으로 다음의 구문을 사용하는 것에 의해서 실현됩니다.

<div ng-controller="MyController as myc"> [...] </div>

일반적인 라우팅 모듈(예: UI 라우터)은 상태에 대해 유사한 속성을 제공합니다.UI 라우터의 경우 상태 정의에서 다음을 사용합니다.

[...]
controller: "MyController",
controllerAs: "myc",
[...]

이것에 의해, 네스트 된 스코프나 주소가 잘못된 스코프의 문제를 회피할 수 있습니다.위의 예는 다음과 같이 구성됩니다.JavaScript 부 。, 당신은 '일부러'나 '일부러'를 사용하지 .$scope.this컨트롤러 오브젝트에 속성을 직접 부가합니다.

angular.module('myApp').controller('MyController', function () {
    this.myText = 'Dummy text';
});

「 」의 .textareacontroller-as as as an an as an an adda.

<textarea ng-model="myc.myText"></textarea>

이것은 오늘날 이러한 작업을 수행하는 가장 효율적인 방법입니다. 왜냐하면 중첩된 스코프로 문제를 해결하면 특정 지점의 레이어 수를 셀 수 있기 때문입니다. 개의 를 " " "와 함께 사용ng-controller할 때 할 수 .그리고 아무도 하루 종일 그렇게 하고 싶어 하지 않아요!

<textarea ng-model="$parent.$parent.$parent.$parent.myText"></textarea>

텍스트 영역을 스코프 변수에 직접 바인딩하지 않고 스코프 변수의 속성에 바인딩합니다.

컨트롤러:

$scope.notice = {text: ""}

템플릿:

<textarea ng-model="notice.text"></textarea>

그렇다.ui-if그것이 문제를 일으킵니다.지시문이 식에 따라 돔 트리의 일부를 파괴하고 다시 만드는 경우 각도입니다.이는 marandus가 제안한 텍스트 영역 디렉티브가 아닌 새로운 스코프를 작성한 것입니다.

여기 ngIf와 ngShow의 차이에 대한 게시물이 있습니다.ng-if와 ng-show/ng-hide의 차이점은 무엇입니까?

언급URL : https://stackoverflow.com/questions/16284442/cannot-get-textarea-value-in-angularjs