Angular：ng-model 指令不适用于`<span>` 元素答案

【问题标题】：Angular: ng-model directive not working with `<span>` elementAngular：ng-model 指令不适用于`<span>` 元素
【发布时间】：2017-08-01 18:28:09
【问题描述】：

我目前正在开发一个使用 bootstrap 和 angular.js 的 Web 应用程序，我在设置其中一个页面的 HTML 代码中嵌入的 span 的默认值时遇到了一些困难。

以前，我可以使用ng-model 来设置和修改来自单独文件中的角度控制器的 HTML 代码中的 HTML 元素的值。这是控制器的样子：

angular.module('mediaPlaylistApp', [])
    .controller('mediaPlaylistCtrl', ['$scope', 'sharedProperties', .....,
        function($scope, sharedProperties, .....,){
        //many lines of code in here
}]);

在此范围内，我可以设置 $scope 变量的属性，然后 HTML 页面上的元素可以使用这些属性。例如，我可以在上面的控制器中设置一个复选框，用下面的 JS 行来检查：

$scope.areAllSelected = true;

与以下HTML代码结合使用时：

<input type="checkbox" ng-model="areAllSelected">

这按预期工作。但是，当我尝试将这种技术复制到不同的 span 元素时，我的问题就出现了。

当我将此 JS 行插入角度控制器时：

$scope.playlistName = 'Enter Playlist Name Here';

结合这段 HTML 代码：

<span ng-model="playlistName">
</span>

它没有按预期工作，因为span 保持空白并且不显示字符串'Enter Playlist Name Here'。什么可能导致这种行为？ ng-model 是否不适用于input 以外的元素，还是我犯的一个简单错误或完全不相关的问题？对此的任何帮助将不胜感激。

【问题讨论】：

标签： javascript html angularjs angular-ngmodel

【解决方案1】：

取自文档：https://docs.angularjs.org/api/ng/directive/ngModel

“ngModel 指令使用 NgModelController 将输入、选择、文本区域（或自定义表单控件）绑定到范围上的属性，该属性由该指令创建和公开。”

是的，您不能将ng-model 与 span 一起使用。相反，您可以使用ng-bind。

<span ng-bind="playlistName"></span>

另一种方法是您可以使用插值运算符 {{}} 包装在作用域上定义的值

  <span>{{playlistName}}</span>

Why ng-bind is better than {{}} ?

【讨论】：

ng-bind 与 {{ }} 的操作方式相同，就单向/双向绑定而言。

【解决方案2】：

你是对的。 ng-models 设置元素的值，而span 没有固有值。你必须像这样显示它：

<span>
{{playlistName}}
</span>

【讨论】：