angularjs基础—scope

最新推荐文章于 2023-10-08 07:51:45 发布

原创最新推荐文章于 2023-10-08 07:51:45 发布

· 472 阅读

0 ·

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

$scope在AngularJS中起到连接视图和控制器的作用，作为数据模型存储数据并供视图和控制器使用。它可以理解为JavaScript对象，允许双向数据绑定。此外，$rootScope是全局作用域，其内的变量在整个ng-app范围内都能访问。通过ng-controller指令，我们可以定义控制器并创建特定的$scope对象。在控制器之间，子控制器可以访问父控制器的$scope变量，反之则不行。

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

$scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构里，这个 $scope 将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。

$scope 实际上就是一个JavaScript对象，controller和view都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope 对象里，我们既存储数据，又存储将要运行在view上的函数。

$rootScope

全局作用域变量，此作用域内变量，在ng-app范围内都可访问

在如下例子里，我们将使用 $rootScope 。在main.js文件里，我们给这个scope加一个name属性。把这个函数放进app.run函数里执行，我们就保证了它能在应用的其他部分之前被执行。你可以把app.run函数看作是Angular应用的main方法。

app.run(function($rootScope) {
  $rootScope.name = "Ari Lerner";
});

我们可以在view的任何地方访问这个name属性，使用模版表达式 {{name}}

ng-controller

要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性：

<div ng-controller="MyController">
  {{ person.name }}
</div>

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：

现在，MyController 给我们建立了一个可以从DOM元素内部直接访问的$scope 对象。下面我们在的这个$scope 里创建一个person对象，在main.js中：

app.controller('MyController', function($scope) {
  $scope.person = {
    name: "Ari Lerner"
  };
});

controller可以嵌套使用，子controller可以访问父级controller的$scope中的变量值，父controller不可访问子controller中的变量

html代码：

<div ng-controller="firstController">
    ...
    <div ng-controller="firstChildController">
        <input type="button" ng-click="sayHello()" value='Say Hello' />
        {{childName}} Say : {{person.word}}
    </div>
</div>

js代码：

app.controller('firstController', function($scope){//$scope变量名不可改名
    $scope.person = {
        name : 'firstName'
    };
});
app.controller('firstChildController', function($scope) {//$scope变量名不可改名
  $scope.sayHello = function() {
    //访问父controller中的person变量
    $scope.person.word = "Hello";
  }

  $scope.childName = "Ketty";
});