ngModel指令文档到底意味着什么?

时间:2014-09-03 08:16:05

标签: angularjs angularjs-directive

我是AngularJs的初学者,但现在我已经使用并了解了AngularJs的工作原理。
我想问的问题是ngModel指令文档中的几行。

这些行是:

  

注意:ngModel将尝试绑定到通过评估给出的属性   表达当前范围。如果该物业尚未存在   在此范围内,它将隐式创建并添加到范围中。

我不明白他们想说什么。我知道ngModel指令将属性绑定到inputselecttextarea控件。就像下面的一个非常简单的代码:

Name: <input type="text" ng-model="myName">
{{myName}}

那么,任何人都可以提出任何其他精确的例子来帮助我理解这些线条吗?

3 个答案:

答案 0 :(得分:2)

ngModel是Angular将范围属性(通常在控制器中声明)绑定到UI的标准方式。

因此,通常会创建一个控制器,其内部声明属性为:

angular.controller('Ctrl', function($scope) {

    $scope.myProperty = '';

}); 

你可以将它绑定到UI:

<div ng-controller="Ctrl">
    <input type="text" ng-model="myProperty"/>
</div>

在此示例中,$scope的范围限定在div元素的用户界面中,因为ng-controller属性会将Ctrl绑定到该元素。

然而,Angular也允许你有点懒惰,而不是在控制器中定义myProperty

angular.controller('Ctrl', function($scope) {

}); 

仍在UI中使用它:

<div ng-controller="Ctrl">
    <input type="text" ng-model="myProperty"/>
</div>

在这种情况下,Angular会在myProperty上隐式(动态)创建$scope。这可以在ng-controller范围内的UI中使用。

这可以用于您不想打扰控制器的仅限UI 属性。例如,当您想要根据用户的交互隐藏/显示某些内容时。

希望这有帮助。

答案 1 :(得分:1)

你有一个$scope的控制器 您可以使用值(例如)

初始化$ scope
$scope.myName= 'test';

然后您输入的默认值为test

Name: <input type="text" ng-model="myName">
{{myName}}

您可以选择不使用值初始化范围,然后在幕后创建$scope.myName并绑定没有默认值。

答案 2 :(得分:0)

让我们打破这个:

Note: ngModel will try to bind to the property given by evaluating the expression
on the current scope. If the property doesn't already exist on this scope, it
will be created implicitly and added to the scope.

1)ngModel将尝试通过评估当前作用域上的表达式来绑定给定的属性。

所以,如果你有元素:

<input ng-model="theProperty">

此元素将具有范围:

var theScope = element.scope()

大多数情况下,在控制器构造函数中访问此作用域...现在,让我们回到语句:

 will try to bind to the property given... on the current scope.

请注意,它显示“尝试”,因为当前范围可能包含或不包含该属性。因为angular会做这样的事情:

 theScope['theProperty'] = the_inputs_value;

当属性不存在时,将创建属性。所以这解释了下一个陈述。

 If the property doesn't already exist on this scope, 
 it will be created implicitly and added to the scope.