textarea 양방향 바인딩이 ng-model과 함께 작동하지 않습니다.

Question

각도 j와 함께 이상한 문제에 직면하고 있습니다. 텍스트 영역을 사용 중이며 기본값이 있습니다. 그러나 내가 텍스트 영역의 값을 수동으로 변경할 때 내 컨트롤러에서 업데이트되지 않습니다.

또한 다른 범위가 기본값으로 바인드되지 않습니다.

내 HTML을

<div ng-controller="req" class ="ng-cloak"> 
<form name="dynamic_fields_tm" ng-submit="goDynamicTm()"> 
         <input type="text" ng-model="tmDynam.one"> 
         <input type="submit" value="Go!" ng-show="tm_dynamic1"> 
        </form> 
<div class="request" ng-if="postrequest_disp"> 
    <textarea>{{postrequest}}</textarea> 
</div> 
</div> 

JS

app.controller('req', function($scope ,$rootScope ,$http ,$location ,$window, $timeout) { 
$scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }"; 
     $scope.postrequest_disp = true; 
     $scope.tm_dynamic1 = true; 
     $scope.goDynamicTm = function() 
     {    
      console.log($scope.postrequest); 
     } 
}); 

첫 번째 문제. 콘솔에서 나는 단지 기본값을받습니다. 그러나 텍스트 영역에서 업데이트 할 때 업데이트 된 값은 아닙니다. 둘째, $ scop.tmDynam.one이 $ scope.postrequest로 업데이트되지 않습니다. 또한 {{}} 대신 ng-model을 사용했습니다. 계속 문제는 지속됩니다 도와주세요

Answer 1

ng-if 안에 텍스트 영역을 사용하기 때문에 격리 된 범위가 생성됩니다. 따라서 부모 범위에 액세스해야합니다. $parent.postrequest 인 텍스트 영역에 ng-model을 사용하십시오. 내가 $ scope.tmDynam.one와 바인더 제본 텍스트 필드에 값을 입력 할 때 내 두 번째 문제를 worked..But

데모

var app = angular.module("myApp",[]); 
 
app.controller('req', function($scope ,$rootScope ,$http ,$location ,$window, $timeout) { 
 
$scope.tmDynam = {one:'', two: ''} 
 
$scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }"; 
 
     $scope.postrequest_disp = true; 
 
     $scope.tm_dynamic1 = true; 
 
     $scope.goDynamicTm = function() 
 
     {   $scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }"; 
 
      console.log($scope.postrequest); 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
<div ng-controller="req" class ="ng-cloak"> 
 
<form name="dynamic_fields_tm" ng-submit="goDynamicTm()"> 
 
         <input type="text" ng-model="tmDynam.one"> 
 
         <input type="submit" value="Go!" ng-show="tm_dynamic1"> 
 
        </form> 
 
<div class="request" ng-if="postrequest_disp"> 
 
    <textarea ng-model="$parent.postrequest"></textarea> 
 
</div> 
 
</div> 
 
</div>