Question

我目前正在开发一个使用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以外的元素不起作用，或者这是我犯过的一个简单错误还是一个完全不相关的问题？任何有关这方面的帮助将不胜感激。

Answer 1

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

“ngModel指令使用NgModelController将输入，select，textarea（或自定义表单控件）绑定到作用域上的属性，NgModelController由此指令创建并公开。”

是的，您不能在{span}中使用ng-model。相反，您可以使用ng-bind。

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

替代方法是您可以使用插值运算符{{}}

包装在作用域上定义的值

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

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

Answer 2

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

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

Angular：ng-model指令不使用`<span>`元素

2 个答案: