AngularJS 中的Scope（作用域）

最新推荐文章于 2023-07-16 21:41:10 发布

老米的世界

最新推荐文章于 2023-07-16 21:41:10 发布

阅读量578

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/MPFLY/article/details/76686945

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Scope是作用在HTML（视图）和JS（控制器）之间的纽带
Scope是一个JS对象，有可用的方法和属性，这些属性和方法可以在视图（即HTML页面）和控制器（即JS文件中）使用。
Scope可应用在视图和控制器上

如何使用Scope

当创建控制器时，可以将$Scope对象当做参数来传递，代码如下：
控制器中的属性对应视图上的属性

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            {{ss}}          
        </div>

        <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
                $scope.ss = "xxxxxxxxxxx";
            });
        </script>
    </body>

AngularJS应用组成

view视图，由HTML负责
Model模型，也就是当前HTML中的标签中有ng-model修饰的标签
Controller（控制器），也就是JS函数

如果你修改了视图中的数据，也就是把页面中中输入框中的值改变之后，它相对应的模型和控制器也会进行相应的改变。如下面的代码：

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <input ng-model="word"/>
            {{word}}
            <button ng-click="btn()">在控制台显示输入框中的值</button>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
                $scope.word="mi";
                $scope.btn = function(){
                    console.log($scope.word)
                };
            });
        </script>
    </body>