关于Angular.js在sts中不起作用

最新推荐文章于 2020-12-12 10:59:22 发布

跟着BOSS有肉吃

最新推荐文章于 2020-12-12 10:59:22 发布

阅读量395

点赞数

本文详细介绍了AngularJS的基础知识，包括如何使用数据绑定和控制器。通过一个简单的示例，展示了如何在HTML中嵌入AngularJS代码，实现输入框与页面元素的实时交互。特别注意，从Angular-1.3.0beta15开始，不再支持全局控制器，需要在模块下定义控制器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始学习AngularJS，跟着教程写了一个简单的例子

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<!--我们有了一个控制器，它初始化了一个 $scope对象，并且有一个name属性。当我们把该控制器关联到DOM节点上，模板就可以通过数据绑定来读取它：-->

<body data-ng-app="hello" data-ng-controller="helloCtrl">
	<input type="text" data-ng-model="name" />
	<p data-ng-bind="name">你好</p>
</body>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
        //定义了一个非常简单的控制器构造函数：helloCtrl，我们在该控制器所创建的 scope 中添加一个 name 属性：
	var helloCtrl=function($scope){
		$scope.name="世界";
	}
</script>
</html>

然后发现，当在文本框中输入数据时，下面的p标签并没有相应的显示，按f12进行调试，看控制台Console：

然后百度，发现从Angular-1.3.0 beta15开始，Angular不再支持全局的Controller。

在一个实际的应用程序中，在 Angular模块下通过 .controller 为你的应用创建控制器，如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body data-ng-app="hello" data-ng-controller="helloCtrl">
	<input type="text" data-ng-model="name" />
	<p data-ng-bind="name">你好</p>
</body>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
	var app=angular.module('hello',[]);
	app.controller('helloCtrl',function($scope){
		$scope.name="世界";
	});
</script>
</html>

运行结果如图：