Двусторонняя привязка textarea не работает с ng-моделью

Question

Я сталкиваюсь со странной проблемой с угловой JS. Я использую textarea и у меня есть значение по умолчанию для этого. Но когда я изменяю значение в текстовой области вручную, оно не обновляется в моем контроллере.

Также другая область не привязывается к значению по умолчанию.

мой 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);
       }
});

Первая проблема. в консоли я получаю только значение по умолчанию... но не обновленное значение при обновлении в textarea. Во-вторых, $scop.tmDynam.one не обновляется с помощью $scope.postrequest. Также я использовал ng-модель вместо {{}}. Но проблема по-прежнему сохраняется Пожалуйста, помогите

Answer 1

Так как вы используете textarea внутри ng-if это создает изолированную область. Так что вам нужно получить доступ к родительской области. Использовать ng-model в текстовом с $parent.postrequest,

демонстрация

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>