AngularJS ng-controller 指令简单实例

前端技术 2023/09/09 JavaScript

AngularJS ng-controller 指令

AngularJS 实例

为应用变量添加控制器:

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<script src=\"http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js\"></script>
</head>
<body>

<div ng-app=\"myApp\" ng-controller=\"myCtrl\">

Full Name: {{firstName + \" \" + lastName}}

</div>

<script>
var app = angular.module(\'myApp\', []);
app.controller(\'myCtrl\', function($scope) {
  $scope.firstName = \"John\";
  $scope.lastName = \"Doe\";
});
</script>

<p>该实例演示了如何定义一个控制器及 scope 的使用。</p>

</body>
</html>

运行结果：

Full Name: John Doe

该实例演示了如何定义一个控制器及 scope 的使用。

定义和用法

ng-controller 指令用于为你的应用添加控制器。

在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

语法

<element ng-controller=\"expression\"></element>

所有 HTML 元素都支持。

参数值

值 描述
expression 控制器名。

希望能帮助学习AngularJS的同学，后续继续补充相关知识。

本文地址：https://www.stayed.cn/item/24972

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案