Angular：ng-model directive not working with'<span>`element

我目前正在研究一个使用bootstrap和angular.js的web应用程序，并且我遇到了一些困难，将默认值span设置为嵌入HTML其中一个页面的代码。Angular：ng-model directive not working with'<span>`element

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

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

在此，我能够设置然后可以通过HTML页面上的元素所使用的$scope变量的属性。例如，我可以设置一个复选框来与上述控制器的以下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以外的其他元素吗？或者这是我犯的一个简单错误还是一个完全不相关的问题？任何帮助，将不胜感激。

来源

2017-08-01 ajc2000

从文档摘自：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 {{}} ?

来源

2017-08-01 18:29:50 Vivz

ng-bind与1/2路绑定的操作与{{}}相同。 – Phix

是的你是对的@Phix – Vivz

你是正确的包装上范围定义的值。 ng-models设置元素的值，而span没有固有值。您必须像这样显示它：

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

来源

2017-08-01 18:31:17

Angular：ng-model directive not working with'<span>`element

回答

相关问题