ng-model 中的值不会更新

Question

我正在使用这个

<textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

据我所知 ng-model="notes" 意味着文本区域被分配了 $scope.notes 是什么。这工作正常，但是每当我编辑文本区域中的文本时， $scope.notes 不应该也改变吗？

当我使用这个按钮时：

<button ng-click="saveNotes(notes)"></button>

"notes" 的值始终是 $scope.notes 的原始值，而不是更新后的值。

谁能告诉我这是为什么？

谢谢

编辑以包含 html 代码：

<ion-view ng-controller="LectureCtrl" id="userMessagesView" view-title="{{lecture.title}}">
  <ion-content>
    <div style="position: absolute; top: 20px; left: 30px; right: 60px;">
      <div style="height: 100%;">
        <iframe class="video" width="560" height="315" src="{{lecture.youtubeLink}}" frameborder="0" allowfullscreen></iframe>

        <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes" ng-change="updatedNotes"></textarea>
      </div>
    </div>
  </ion-content>

  <button ng-click="saveNotes(notes)">
  </button>
<ion/view

Answer 1

将 ng-model 视为将控制器变量连接到 HTML 的一种方式，反之亦然。因此，如果您在控制器中设置 $scope.notes，然后在 html 中使用大括号 {{ notes }}，则变量内容将显示在您的 html 中，即

控制器 =>（绑定到）=> 你的 HTML ($scope.notes)

但它可以双向工作（双向绑定）。因此，如果您在 HTML 中使用 ng-model，它现在将从输入字段中获取该内容并将其设置为控制器中的变量。您无需执行任何操作，因为它是在 Angular 中在后台完成的，即如果您在文本区域中键入“Hello world”，它已经更新为控制器中的变量。所以你不需要用 .

控制器 <=（最多绑定）<= HTML (ng-model="notes")

双向绑定有 3 个部分（非常简单）：

变量在控制器中用 $scope 设置。 $scope.notes 声明控制器“umbrella”中的任何代码或 HTML 都将具有访问变量。
使用 ng-model 将 $scope 变量连接到 HTML 元素。超过简化的 ng-model 只是说将 $scope.notes 变量连接到这个元素。我认为它是 HTML 和 ctrl 之间的管道并且您不需要触摸它，因为可变内容正在流动在由 Angular
使用 {{}} 将变量解析（绑定）到 UI 即 {{notes}} 表示显示该变量的内容

2WAY 绑定的简单示例

  <input type="text" ng-model="first.greeting">
  <div ng-class="first.greeting">
    {{first.greeting}} {{"World"}}

  </div>

你的密码 // 不需要传回笔记它已经在你的 ctrl 中了

  // proof
    .controller('MyController', ['$scope', function($scope) {
         // if you set this up the string wills how up in your textarea
        $scope.notes = "Set notes two way binding";

       // click on notes and it will loot whatever you have entered into your input field
        $scope.saveNotes = function() {
            console.log('Lets check if notes is here', $scope.notes);
        }

    }])

     // Note if you set $scope.notes = "Set notes two way binding"; in your ctrl the  "Set notes two way binding" wills how up in your textbox
    <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="notes"></textarea>

“Umbrella”$scope 问题 – $scope 未连接到其控制器

现在，如果这对您来说已经有意义并且您已完成所有设置但您仍然遇到问题，那么很可能您遇到了 $scope 问题，即您的控制器的“管道”已断开连接。我认为这是从一个区号移动到另一个区号，即您每天拨打 555 然后飞到另一个州，然后尝试使用 555 但它不起作用，因为区号是 777。$scope.555 只能工作使用知道 555 的控制器。如果您是不同的状态（控制器），则 555 没有任何意义，在这种情况下 Angular 将“丢弃它”。它实际上并没有丢弃它只是假设你很聪明并在它目前不知道的其他地方拨号（例如国际）所以它传递它假设系统中的某个地方知道如何处理 555。

范围示例 "DISCONNECT"

    .controller('ProductsController', ['$scope', function($scope) {
        $scope.product = "My product";

        $scope.saveProduct = function() {
            console.log('Lets check if product is here', $scope.product);
        }
    }])

    .controller('ReviewsController', ['$scope', function($scope) {

    }])

    <div ng-controller="ProductsController">
      /// lots of html stuff
    </div>
    <div ng-controller="ReviewsController">
            // Note: ProductsController is no longer managing the product variable. OtherStuffController now has "control" of all variables and it has no product variable
            // this seems logical but it happens all the time especially with large HTML or in my case template hell :) There are a number of tools to help with this debugging
            <textarea class="notes" placeholder="Placeholder Text" style="height: 630px;" ng-model="product"></textarea>
    </div>

ng-model 中的值不会更新

Value in ng-model doesn't update

javascript

angularjs

angular-ngmodel

angularjs-ng-model