AngularJS获取HTML文本长度异常求助：结果始终为1

嘿，我来帮你搞定这个问题！你每次拿到长度1，大概率是因为搞错了获取对象——你拿到的是DOM元素集合的长度，而不是输入框里文本内容的长度。下面给你详细讲正确的做法：

一、针对input text输入框的正确姿势 #

AngularJS的核心是数据绑定，所以最规范的做法是用ng-model把输入框的值绑定到scope变量，然后直接取这个变量的length属性。

1. HTML结构 #

<div ng-app="myTextApp" ng-controller="TextController">
  <input type="text" ng-model="inputText" placeholder="输入文本...">
  <!-- 直接在模板里实时显示长度 -->
  <p>当前文本长度：{{ inputText ? inputText.length : 0 }}</p>
  <!-- 也可以通过按钮触发控制器里的方法获取 -->
  <button ng-click="checkLength()">查看长度</button>
</div>

2. 控制器代码 #

angular.module('myTextApp', [])
.controller('TextController', function($scope) {
  // 初始化绑定变量，避免undefined报错
  $scope.inputText = '';

  $scope.checkLength = function() {
    // 先判断变量是否存在，再取长度
    var textLength = $scope.inputText ? $scope.inputText.length : 0;
    console.log('文本长度：', textLength);
  };
});

二、为什么之前得到1？ #

你之前的错误操作大概是这样的：用angular.element或者原生document.getElementById获取了输入框元素，而这些方法返回的是类数组的DOM集合（哪怕只有一个元素），这个集合的length属性就是1，完全不是文本内容的长度。比如错误示例：

// 错误示例！不要这么做
$scope.checkLength = function() {
  var inputElement = angular.element('#myInput');
  console.log(inputElement.length); // 这里输出1，因为是元素集合的长度
};

三、如果是静态文本元素（比如div/span里的文本） #

如果你的"text类型元素"是指静态的文本容器，同样推荐用数据绑定的方式：

<div ng-app="myTextApp" ng-controller="TextController">
  <div ng-bind="staticContent" id="staticText"></div>
  <p>静态文本长度：{{ staticContent.length }}</p>
</div>

控制器里初始化变量：

$scope.staticContent = "这是一段静态文本内容";

如果是无法用数据绑定的动态生成文本，也可以直接获取元素的文本内容再算长度：

$scope.getStaticTextLength = function() {
  var textElement = angular.element('#staticText');
  // 获取文本内容并去除首尾空格
  var textContent = textElement.text().trim();
  console.log('静态文本长度：', textContent.length);
};

内容的提问来源于stack exchange，提问作者chaitanya kumar