javascript - Angular:ng-model指令不适用于`<span>`元素

我目前正在开发一个使用bootstrap和angular.js的web应用程序，在设置嵌入其中一个页面的HTML代码中的默认值aspan时遇到了一些困难。
以前，我可以使用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以外的元素，或者这是我犯的一个简单错误还是一个完全无关的问题？如有任何帮助，我们将不胜感激。

最佳答案

摘自文件：https://docs.angularjs.org/api/ng/directive/ngModel
ngModel指令使用NgModelController将input、select、textarea（或自定义窗体控件）绑定到作用域上的属性，NgModelController由该指令创建并公开
是的，您不能将ng-model与span一起使用。相反，您可以使用ng-bind。

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

另一种方法是，您可以使用插值运算符{{}}

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

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

关于javascript - Angular:ng-model指令不适用于`<span>`元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45445213/