Закрытие модальное не очищает данные textarea, но он очищает модель

Question

У меня есть простой модальный, который содержит текстовую область. Моя проблема заключается в сбросе данных в textarea.

Вот мой модальный:

<div class="modal fade" ng-controller="MyCtrl"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      </div> 
      <div class="modal-body"> 
       <textarea ng-model="content" ng-change="statusChange(content)" placeholder="update" required="required"></textarea> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <a class="btn" data-dismiss="modal" aria-hidden="true" ng-click="reset()"> 
       Cancel 
      </a> 
     </div> 
    </div> 
</div> 

Моего контроллер:

myApp.controller('MyCtrl', function($scope){ 
    $scope.content=""; 

    $scope.statusChange = function(param){ 
     $scope.content = param; 
    } 

    $scope.reset = function(){ 
     $scope.content = ""; 
    } 
}) 

Моей проблема: У меня есть данные в текстовом поле, связанное с содержанием через нг-модель, но если я вхожу содержание в моя текстовая область, а затем закрыть модальный, мы получаем $scope.content="", однако, когда я снова открываю модальный, текстовая область все еще содержит ранее введенные данные. Я могу подтвердить, распечатав данные содержимого, что данные в текстовой области не совпадают с значением $scope.content.

Как заставить текстовую область иметь такое же значение $scope.content, когда мода снова открывается?

Здесь приведено JSFiddle проблемы http://jsfiddle.net/RLQhh/64/. Чтобы увидеть эту проблему, откройте modal, введите что-то в текстовое поле и нажмите кнопку закрытия. Обратите внимание на вывод консоли (он должен показать, что вы набрали, а затем пустую строку). Теперь откройте modal, и вы увидите, что последнее, что вы набрали, - это то, что находится в текстовом поле. Также обратите внимание, что при повторном открытии окна текущие данные в $scope.content отображаются в консоли (пустая).

Answer 1

вам необходимо поставить content в объект в пределах области действия.

Я обновил fiddle, и он работает. Вместо $scope.content используйте $scope.modal.content. См. this answer для получения дополнительной информации. Более подробное объяснение можно найти here, но в основном это связано с тем, как примитивы работают в совместном использовании javascript и scope.

ng-model - это директива, которая создает другую область видимости и связывает ('=') свойство родительской области со значением текстового поля (или текстового поля, или выберите и т. Д.). Когда свойство является примитивным, оно передается по значению и копируется во внутреннюю область. Поскольку объекты передаются по ссылке, это не проблема, когда свойство вложено, поскольку передается ссылка на объект.

Когда вы пишете прямо в свой контент, вы являетесь областью действия в вашем методе сброса, он заменяет (записывает) значение в $ scope для контроллера, а не директиву ng-model, и выходить из синхронизации. если, однако, у вас есть ng-модель, привязанная к объекту, когда вы пишете контент (в этом случае modal.content), вы читаете модальное и записываете его свойство содержимого. значение получает замену, но поскольку ваша ng-модель привязана скорее к модальной, а не к контенту напрямую, привязка не нарушается (вы читаете только модальную, не записываете на нее).