ng-show和ng-model不能在同一个$ scope变量上一起工作

Question

我试图让span元素显示一些$ scope变量，只要它不是null或空。

我知道我只用ng-model可以做到这一点，但我不明白他们不会工作：

<span ng-show="x !== null" ng-model="x"></span>

或类似的东西。

Answer 1

ng-model用于双向绑定（如上面的@MK Safi所述），这意味着它用于既显示值又允许用户更改这些值的元素。可能不是<span/> ......

如果您只想在范围内显示模型的值，请使用ng-bind或表达式语法 - {{ x }}

这样，ng-show应该可以正常工作，将相关的CSS样式添加为x更改。

E.g：

<span ng-bind="x" ng-show="x !== null"></span>

或

<span ng-show="x !== null">{{ x }}</span>

Answer 2

ng-model主要用于input，textarea和select元素。它未在span，div或p元素等上使用。

来自Angular documentation on ngModel

  

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

Answer 3

是的，正如MK Safi所说，ng-model仅用于绑定$scope个变量。这应该工作：

<span ng-show="x !== null">{{ x }}</span>

只需使用模板引擎在$scope.x

中显示值