AngularJS Scope(作用域)

来源：互联网发布：下载摇奖软件编辑：程序博客网时间：2024/05/22 02:21
<!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>
阅读全文
0 0