38.angular的scope作用域

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 121 阅读

文章标签：

#javascript #ViewUI

本文介绍了AngularJS中Scope的作用及使用方法。通过示例代码详细解释了如何在控制器中设置Scope变量，并在视图中获取这些变量。同时展示了如何通过Scope进行数据绑定和交互操作。

转自：https://www.cnblogs.com/best/tag/Angular/

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

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

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

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

 1 <html>
 2 
 3 <head>
 4     <meta charset="utf-8">
 5     <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 6 
 7 </head>
 8 
 9 <body>
10 <!--
11     <div ng-app="myApp" ng-controller="myCtrl">
12         <h1>{{carname}}</h1>
13     </div>
14     <script>
15         var app = angular.module('myApp',[]);
16         app.controller('myCtrl',function($scope){
17             $scope.carname="Vovvovo"
18         });
19     </script>
20 -->
21     <div ng-app="myApp" ng-controller="myCtrl">
22         <input ng-model="name">
23         <h1>{{greeting}}</h1>
24         <button ng-click='sayHello()'>点我</button>
25     </div>
26     <script>
27      var app = angular.module('myApp',[]);
28      app.controller('myCtrl',function($scope){
29          $scope.name= "Runnobo";
30          $scope.sayHello = function(){
31              $scope.greeting="Hello"+$scope.name;
32          }
33      });
34     </script>
35 </body>
36 
37 </html>