AngularJS Scope(作用域)

最新推荐文章于 2022-08-08 10:31:46 发布

雾里看花叹朦胧

最新推荐文章于 2022-08-08 10:31:46 发布

阅读量265

点赞数

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

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/77916663

版权

angularjs 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Scope(作用域)</title>

    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/angular.min.js"></script>
</head>
<body>

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

    <!--
        如何使用 Scope:
        当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
    -->
    <!--<div ng-app="myApp" ng-controller="myCtrl">
        <h1>{{carname}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.carname = "Volvo";
        });
    </script>-->

    <!--<div ng-app="myApp" ng-controller="myCtrl">
        <input ng-model="name">
        <h1>{{greeting}}</h1>
        <button ng-click='sayHello()'>点我</button>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "Runoob";
            $scope.sayHello = function() {
                $scope.greeting = 'Hello ' + $scope.name + '!';
            };
        });
    </script>-->

    <!--
        根作用域:
        所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
        $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
        $rootScope 与 $scope 中的变量有重复时，$scope 会覆盖 $rootScope 中的同名变量，如果需要使用 $rootScope 中的同名变量，需要加上 $root. 前缀
    -->
    <div ng-app="myApp">
        <div ng-controller="myCtrl1">
            <ul>
                <li ng-repeat="name in names">{{lastName}} {{name}}</li>
            </ul>
        </div>
        <div ng-controller="myCtrl2">
            <ul>
                <li ng-repeat="name in names">{{lastName + " " + name + " " + $root.lastName}} </li>
            </ul>
        </div>
        <div ng-controller="myCtrl3">
            <ul>
                <li ng-repeat="name in names">{{lastName}} {{name}} {{$root.lastName}} </li>
            </ul>
        </div>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl1", function ($scope, $rootScope) {
            $scope.names = ["July", "Pli", "Timi"];
            $rootScope.lastName = "Tomas";
        });
        app.controller("myCtrl2", function ($scope, $rootScope) {
            $scope.names = ["P", "E", "mi"];
        });
        app.controller("myCtrl3", function ($scope, $rootScope) {
            $scope.names = ["P", "E", "mi"];
            $scope.lastName = "Duse";
        });
    </script>

</body>
</html>