angularjs-作用域

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

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

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

  $scope对象就是一个普通的JavaScript对象,但与传统的数据模型不一样,$scope并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

  $scope的所有属性,都可以自动被视图访问到。eg:

<div ng-app="myapp">
       <h1>Hello {{ name }}</h1>
</div>
//我们希望{{ name }}变量是本地$scope的一个属性
angular.module('myapp', [])
   .run(function($rootScope) {
     $rootScope.name = "World";         
});

  作用域嵌套:

<body ng-app="myapp">
    <p>we can access: {{ rootProperty }}</p>
    <div ng-controller="ParentController">
        <p>we can access: {{ rootProperty }} and {{parentProperty}}</p>
        <div ng-controller="ChildController">
            <p>
                we can access:
                {{ rootProperty }}and
                {{ parentProperty }}and
                {{ childProperty }}
            </p>
            <p>{{ fullSentenceFromChild }}</p>
        </div>
    </div>
    <script>
        angular.module('myapp', [])
        .run(function($rootScope) {
            //使用.run访问$rootScope
            $rootScope.rootProperty = 'root scope';
        })
        .controller('ParentController',function($scope){
            $scope.parentProperty = 'parent scope';
        })
        .controller('ChildController', function($scope){
            $scope.childProperty = 'child scope';
            $scope.fullSentenceFromChild = 'same $scope: we can access' + 
            $scope.rootProperty + 'and' + 
            $scope.parentProperty + 'and' +
            $scope.childProperty
        });
    </script>
</body>

  运行结果:

  

原文地址:https://www.cnblogs.com/vicii/p/6489480.html