AngularJS 中的Scope(作用域)

  • 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> 

在输入框中输入不同的值,点击按钮,就可以在控制台看到相应的值。如下图:
AngularJS 中的Scope(作用域)_第1张图片

根作用域$rootScope

所有的应用都有一个$rootScope,它可以作用在爱ng-app指令包含的所有HTML元素中,rootScope可作用于整个应用中,用rootScope定义的值,可以在各个controller中使用。

你可能感兴趣的:(AngularJS)