Angularjs：返回textarea中的剩余字符

我对Angualrjs不熟悉。我试图在文本区域中显示剩余的字符

<textarea ng-model="message" ng-maxlength="100"></textarea>
<div id="characters" ng-model="message"><span>Characters left: {{remaining()}}</span>  </div>

我得到的错误是：

Error: Error while interpolating: Characters left: {{remaining()}} TypeError:  this.scope is undefined

---

有人能帮忙吗？

您需要将作用域作为参数传递到函数中。

我认为this.scope.remaining是在控制器中定义的。 不要使用this.scope.remaining，而是将$scope作为依赖项传递，然后执行$scope.remaining

---

如果您共享一个JSFIDLE，我们将能够确切地看到问题所在。

我认为您可能使问题变得比需要的更复杂。试试这个：

在控制器中：

.controller('myCtrl', function($scope /* other dependencies here */){
    ...
    $scope.maxLength = 100; // this is the max # of chars allowed in the textarea
    ...
});

<textarea ng-model="message" ng-maxlength="{{maxLength}}"></textarea>
<div id="characters">
    <span>Characters left: {{maxLength - message.length}}</span>
</div>

<div ng-controller="myCtrl">
  <textarea
    ng-model="message"
    ng-maxlength="{{ maxLength }}">
  </textarea>
  <div>
    <span>Characters left: {{ remaining() }}</span>
  </div>
  If there are more than {{ maxLength }} characters, then a red border will be shown.
  <div>
    Message: {{ message }}
  </div>
</div>

function myCtrl($scope) {
  $scope.maxLength = 5;

  $scope.remaining = function() {
    return $scope.maxLength - angular.element(document).find('textarea')[0].value.length;
  }
}

在您的html中：

.controller('myCtrl', function($scope /* other dependencies here */){
    ...
    $scope.maxLength = 100; // this is the max # of chars allowed in the textarea
    ...
});

<textarea ng-model="message" ng-maxlength="{{maxLength}}"></textarea>
<div id="characters">
    <span>Characters left: {{maxLength - message.length}}</span>
</div>

<div ng-controller="myCtrl">
  <textarea
    ng-model="message"
    ng-maxlength="{{ maxLength }}">
  </textarea>
  <div>
    <span>Characters left: {{ remaining() }}</span>
  </div>
  If there are more than {{ maxLength }} characters, then a red border will be shown.
  <div>
    Message: {{ message }}
  </div>
</div>

function myCtrl($scope) {
  $scope.maxLength = 5;

  $scope.remaining = function() {
    return $scope.maxLength - angular.element(document).find('textarea')[0].value.length;
  }
}

左字符：{{maxLength-message.length}

---

当用户在文本区域键入时，

{{maxLength-message.length}}

的双向绑定将立即更新为正确的剩余字符数。

回答得好，TennisAgent！但是，必须在模板中插入maxLength，验证才能生效

<textarea ng-model="message" ng-maxlength="100"></textarea>
<div id="characters" ng-model="message"><span>Characters left: {{remaining()}}</span>  </div>

这里有一个关于插值的小把戏：

如果键入的字符数超过ng maxlength（$scope.maxlength）的值，angular将清除绑定模型（$scope.message）。剩余字符数的度量（maxLength-message.length）将不再有效。这可以从上面的小提琴中看出

为了处理这个场景，我在作用域上添加了一个函数，并将其绑定到模板（很像user3214545的方法）。这样，最大长度验证将应用于文本区域，剩余字符度量将告诉您超出的字符数

模板：

.controller('myCtrl', function($scope /* other dependencies here */){
    ...
    $scope.maxLength = 100; // this is the max # of chars allowed in the textarea
    ...
});

<textarea ng-model="message" ng-maxlength="{{maxLength}}"></textarea>
<div id="characters">
    <span>Characters left: {{maxLength - message.length}}</span>
</div>

<div ng-controller="myCtrl">
  <textarea
    ng-model="message"
    ng-maxlength="{{ maxLength }}">
  </textarea>
  <div>
    <span>Characters left: {{ remaining() }}</span>
  </div>
  If there are more than {{ maxLength }} characters, then a red border will be shown.
  <div>
    Message: {{ message }}
  </div>
</div>

function myCtrl($scope) {
  $scope.maxLength = 5;

  $scope.remaining = function() {
    return $scope.maxLength - angular.element(document).find('textarea')[0].value.length;
  }
}

这里是“摆弄”功能：

---

当然，在更现实的场景中，这将被包装在一个指令中。作用域和元素都将传递给指令。使用隔离作用域，我们还可以控制参数，如最大长度、必需、禁用以及是否应在模板上显示剩余字符。

定义“剩余”函数的位置？你为什么用这个。请删除它，再试一次。这是在控制器的上下文中吗？我从未使用过JSFIDLE，但现在我们开始。。。。我使用的是typescript而不是javascript对不起，只是用一个新的链接编辑了这个评论，这个链接与我的代码完全一样，第一个链接是错误的对不起，我不知道typescript，所以在代码中找不到问题。您需要做的是将$scope作为参数传递给控制器函数，并定义$scope.remaining，而不是this.scope.remaining。我不确定typeScript的语法，但我相信你能理解。非常好，简单的解决方案。angular 1.3对我有效。我必须稍微调整一下才能让它起作用。ng maxlength=“{{maxlength}}”中的胡须是否可能是错误的？然后它仍然不起作用-maxlength为0左右，所以我恢复使用maxlength=100而不是ng maxlength。