Question

我正在使用这个

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

从我所能理解的ng-model =“notes”意味着textarea被分配了$ scope.notes。这是正常的，但每当我在textarea中编辑文本时，$ 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中。

Controller =＆gt;（绑定到）=＆gt;你的HTML（$ scope.notes）

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

控制器＆lt; =（绑定到）＆lt; = HTML（ng-model =“notes”）

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

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

2路绑定的简单例子

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

  </div>

你的代码 //没有eed将注释传回来它已经存在于你的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>

“伞”$范围问题 - $ scope未连接到其控制器

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

范围“断开连接”的例子

    .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中的值不会更新

1 个答案: