angular

最新推荐文章于 2025-03-18 16:30:12 发布

大贺子

最新推荐文章于 2025-03-18 16:30:12 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS

本文链接：https://blog.youkuaiyun.com/csdnhsy/article/details/73958691

AngularJS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了AngularJS中Scope(作用域)的概念及其应用。Scope作为HTML视图与JavaScript控制器间的桥梁，包含了可被视图访问的方法和属性。文章通过示例展示了如何在控制器中设置数据并在视图中显示。

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

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

视图可以指的是HTML中的元素

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

<h1>{{carname}}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.carname = "Volvo";

});

</script>

scopt的组成应该有三个部分组成1.视图(HTML元素)2.Model模型(可用的数据)3.Controller控制器(可以添加或修改属性。)

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() { //使用了angularjs封装的点击事件只要使用了angular的应用程序就可以控制程序中的代码
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>