📜  AngularJS-控制器

📅  最后修改于: 2020-10-27 02:49:27             🧑  作者: Mango


AngularJS应用程序主要依靠控制器来控制应用程序中的数据流。控制器是使用ng-controller指令定义的。控制器是一个JavaScript对象,其中包含属性/属性和函数。每个控制器都接受$ scope作为参数,它表示控制器需要处理的应用程序/模块。

...

在这里,我们使用ng-controller指令声明一个名为studentController的控制器。我们定义如下-


  • studentController被定义为带有$ scope作为参数的JavaScript对象。

  • $ scope引用使用studentController对象的应用程序。

  • $ scope.student是studentController对象的属性。

  • firstName和lastName是$ scope.student对象的两个属性。我们将默认值传递给他们。

  • 属性fullName是$ scope.student对象的函数,该对象返回组合的名称。

  • 在fullName函数,我们获取了Student对象,然后返回组合名称。

  • 注意,我们还可以在单独的JS文件中定义控制器对象,然后在HTML页面中引用该文件。

现在我们可以使用ng-model或如下表达式使用studentController的student属性:

Enter first name: 
Enter last name:

You are entering: {{student.fullName()}}
  • 我们将student.firstName和student.lastname绑定到两个输入框。

  • 我们将student.fullName()绑定到HTML。

  • 现在,无论何时在名字和姓氏输入框中键入任何内容,您都可以看到全名会自动更新。

以下示例显示了控制器的用法-

testAngularJS.htm

Angular JS Controller
      
   
   
   
      

AngularJS Sample Application

Enter first name:

Enter last name:

You are entering: {{student.fullName()}}

输出

在网络浏览器中打开文件testAngularJS.htm并查看结果。