Search by category:
AngularJS

Scope là gì? tìm hiểu Scope trong AngularJS

Scope là gì? tìm hiểu Scope trong AngularJS. Biến $scope hay được sử dụng trong AngularJS Framework mà bạn chưa hiểu về nó thì bài viết này Blogtinhte.Net sẽ giải thích ý nghĩa Scope cho bạn hiểu nhé.

Scope là gì

Scope trong tiếng anh có nghĩa phạm vi, giá trị và trong AngularJS thì Scope là đối tượng gắn kết giữa thành phần HTML (view) and the JavaScript (controller). Scope chứa thông tin là các dữ liệu model. Trong controller, dữ liệu model có thể được truy cập qua đối tượng $scope.

Ví dụ: $scope.name = “TinhTe”; thì ngay lập tức {{name}} sẽ có giá trị hiển thị là TinhTe

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

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

</body>
</html>

Scope trong AngularJS

Nếu chúng ta xem xét một ứng dụng AngularJS tới bao gồm:

  • View là HTML.
  • Model là các dữ liệu có sẵn cho giao diện hiện.
  • Controller, đó là chức năng Javascript điều khiển dữ liệu.
    Thì Scope là các Model.

Scope là một đối tượng JavaScript gồm các properties and methods.

Xem thêm ví dụ: Một ứng dụng AngularJS có thể chứa nhiều $Scope và Controller

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myapp">
        <div class="show-scope-demo">
            <div ng-controller="GreetController">
                Hello {{name}}!
            </div>
            <div ng-controller="ListController">
                Hello {{name}}!
            </div>
        </div>
        <script>
            angular.module("myapp", [])
                    .controller('GreetController', function ($scope){
                        $scope.name = 'Nguyễn Văn A';
                    })
                    .controller('ListController', function ($scope){
                        $scope.name = 'Nguyễn Văn B';
                    });
        </script>
    </body>
</html>
scope-la-gi-tim-hieu-scope-trong-angularjs
scope-là-gì-tìm-hiểu-scope-trồng-angularjs

Root Scope là gì?

$RootScope là bậc cao nhất nên sẽ bao quát hết các $scope bên trong nó, không giống với $scope là chỉ ảnh hưởng trong phạm vi của controller.

Xem ví dụ:

Giống với ví dụ trên, nhưng mình thêm $RootScope

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <style>
            .app-scope.ng-scope,
            .app-scope .ng-scope  {
                border: 1px solid red;
                margin: 2px;
            }
            .app-scope .ng-scope .ng-scope{
                border:solid 1px blue;
            }
        </style>
    </head>
    <body ng-app="myapp">
        <div class="app-scope">
            <div ng-controller="GreetController">
                Hello {{name}}!
            </div>
            <div ng-controller="ListController">
                Hello {{name}}!
            </div>
        </div>
        <script>
            angular.module("myapp", [])
                    .controller('GreetController', function ($scope, $rootScope){
                        $rootScope.name = 'NGUYỄN VĂN A';
                    })
                    .controller('ListController', function ($scope){

                    });
        </script>
    </body>
</html>

$scope lồng nhau

$scope có thể lồng nhau

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myapp">
        <div class="app-scope">
            <div ng-controller="TopController">
                <div ng-controller="GreetController">
                    XIN CHÀO: {{name}}!
                </div>
                <div ng-controller="ListController">
                    XIN CHÀO: {{name}}!
                </div>
                XIN CHÀO: {{name}}!
            </div>
        </div>
        <script>
            angular.module("myapp", [])
                    .controller('TopController', function($scope) {
                $scope.name = 'END';
            })
                    .controller('GreetController', function($scope) {

            })
                    .controller('ListController', function($scope) {

            });
        </script>
    </body>
</html>

Ở ví dụ này, mình chỉ khai báo name cho TopController thế nhưng GreetController và ListController đều có giá trị in ra vì được thừa hưởng từ TopController được đinh nghĩa bởi thẻ div bao cả 2 Controller kia.

Post Comment

Loading...
loading...
loading...