Rate this post

Trong AngularJS, Data Binding đóng một vai trò trọng yếu, là khả năng đồng bộ hóa dữ liệu liên tục giữa model và view. Tính năng này làm cho việc cập nhật và hiển thị dữ liệu trên giao diện người dùng trở nên dễ dàng và tự động, đặc biệt là khi có sự tương tác từ người dùng.

Trong bài viết này, do W3seo soạn thảo, chúng ta sẽ đi sâu vào việc áp dụng Data Binding trong AngularJS, khám phá những đặc điểm nổi bật của nó. Chúng ta cũng sẽ nghiên cứu sự khác biệt giữa One-way Binding và Two-way Binding, cùng cách thực hiện Interpolation và Property Binding trong quá trình Data Binding.

Data Binding là một công cụ không thể thiếu trong quá trình phát triển ứng dụng, tạo sự kết nối không thể phá vỡ giữa giao diện người dùng và logic nghiệp vụ. Sử dụng mô hình Two-Way Data Binding của AngularJS, quá trình quản lý dữ liệu trở nên thuận lợi và hiệu quả hơn bao giờ hết.

Directive Data Binding

Directive Data Binding trong AngularJS là một tính năng độc đáo giúp cập nhật nhanh chóng giữa model và view. Khi thực hiện thay đổi dữ liệu, trang không cần tải lại và dữ liệu được cập nhật tự động. Các directive chính trong quá trình này bao gồm ng-bind, ng-bind-html, ng-bind-template, ng-model và ng-non-bindable. Hãy xem xét từng directive một cách chi tiết.

  1. ng-bind
  2. ng-bind-html
  3. ng-bind-template
  4. ng-model
  5. ng-non-bindable

Tiếp theo, chúng ta sẽ chi tiết mỗi Directive và kết hợp giải thích về cách Data Binding hoạt động trong AngularJS.

Ng-bind

Ng-bind, một trong những directive cơ bản của AngularJS, đóng vai trò quan trọng trong quá trình biên dịch. Nó chuyển đổi nội dung trong thẻ HTML thành giá trị được chỉ định trong ng-bind. Thay vì áp dụng ng-bind một cách trực tiếp, như <div ng-bind="value"></div>, khuyến nghị sử dụng qua thuộc tính class, ví dụ <div class="ng-bind: value"></div>, để tạo sự linh hoạt và tránh lỗi. Dưới đây là một ví dụ minh họa sử dụng ng-bind:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example Using ng-bind</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="">
    <input ng-model="info" />
    <div class="ng-bind: info"></div>
    <div ng-bind="info"></div>
</body>
</html>

Mô Hình Data Binding trong AngularJS

AngularJS cung cấp ba loại Data Binding:

One-Way Binding: Khi scope trong Controller thay đổi, view cập nhật tương ứng, nhưng sự thay đổi trong view không ảnh hưởng lại scope.

Two-Way Binding: Thay đổi trong scope hoặc view đều được cập nhật lẫn nhau. Cả dữ liệu trong scope và view đều thay đổi khi một trong hai có sự thay đổi.

One-Time Binding: Scope truyền dữ liệu đến view chỉ một lần. Các thay đổi sau đó trong scope không ảnh hưởng đến dữ liệu đã hiển thị trong view.

Ví dụ về One-Way Binding:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>One-Way Binding Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.text = "Hello World";
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <input ng-model="text" />
    <p>{{text}}</p>
</body>
</html>

Trong ví dụ trên, AngularJS tạo điều kiện cho việc quản lý “dữ liệu chân lý duy nhất”, thường được thực hiện thông qua ng-bind hoặc cú pháp hai dấu ngoặc nhọn.

Directive ng-bind-html

Directive ng-bind-html trong AngularJS đóng một vai trò quan trọng khi cần hiển thị nội dung HTML từ model mà không muốn nó được hiển thị dưới dạng văn bản thuần túy. Khi sử dụng ng-bind thông thường, nội dung HTML sẽ không được hiển thị đúng cách. Để khắc phục, ng-bind-html kết hợp với thư viện sanitize cho phép AngularJS hiển thị nội dung dưới dạng HTML.

Để sử dụng ng-bind-html, bạn cần thêm thư viện sanitize vào dự án:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.js"></script>

Sau đó, bạn cần đăng ký thư viện sanitize trong module AngularJS:

angular.module("myApp", ["ngSanitize"]);

Với cách tiếp cận này, AngularJS sẽ hiểu rằng nội dung nhập vào là mã HTML và sẽ hiển thị chính xác dưới dạng HTML, không phải dạng văn bản thuần túy. Ví dụ sử dụng ng-bind-html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-bind-html Demonstration</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <h2>Displaying HTML Content with ng-bind-html:</h2>
    <div ng-bind-html="htmlContent"></div>

    <script>
        angular.module("myApp", ["ngSanitize"])
            .controller("myController", function($scope, $sce) {
                // Unsafe HTML content
                var unsafeHtml = '<p style="color: blue;">Welcome to <b>AngularJS</b> World!</p>';

                // Marking the HTML as safe to display
                $scope.htmlContent = $sce.trustAsHtml(unsafeHtml);
            });
    </script>
</body>
</html>

Trong ví dụ này:

  • Sử dụng ng-bind-html để hiển thị nội dung HTML từ biến $scope.htmlContent, chứa chuỗi HTML.
  • Sử dụng $sce.trustAsHtml để đánh dấu chuỗi HTML là an toàn và có thể hiển thị trong AngularJS.

Directive ng-bind-template

Directive ng-bind-template trong AngularJS là một công cụ linh hoạt, cho phép kết hợp nhiều biểu thức trong một directive duy nhất. Điều này tạo ra sự khác biệt lớn so với ng-bind thông thường, bởi ng-bind-template có thể kết hợp nhiều giá trị cùng một lúc, chẳng hạn như ng-bind-template=”{{value1}}{{value2}}”. Tính năng này giúp tối ưu hóa quá trình quản lý và hiển thị dữ liệu, đặc biệt là trong các trường hợp cần kết hợp dữ liệu từ nhiều nguồn khác nhau.

Dưới đây là một ví dụ minh họa về việc áp dụng directive ng-bind-template trong AngularJS để kết hợp nhiều biểu thức:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-bind-template Demonstration</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">

    <h2>Combining Multiple Expressions with ng-bind-template:</h2>
    <div ng-bind-template="Today is {{day}}. The time is {{time}}."></div>

    <h2>Dynamic Content Based on Conditions:</h2>
    <div ng-bind-template="Today's special: {{ isWeekend ? 'Enjoy your weekend!' : 'Have a productive day!' }}"></div>

    <script>
        angular.module("myApp", [])
            .controller("myController", function($scope) {
                $scope.day = "Monday";
                $scope.time = "8:00 AM";
                $scope.isWeekend = false;
            });
    </script>

</body>
</html>

Trong ví dụ này:

  • Combining Multiple Expressions: Sử dụng ng-bind-template để kết hợp các giá trị của biến {{day}}{{time}} để tạo ra một thông điệp động.
  • Dynamic Content Based on Conditions: Sử dụng ng-bind-template với một biểu thức điều kiện, ở đây là {{ isWeekend ? 'Enjoy your weekend!' : 'Have a productive day!' }}. Nội dung thay đổi tùy thuộc vào giá trị của biến $scope.isWeekend.

Qua đó, ng-bind-template mang lại khả năng hiển thị dữ liệu đa dạng và phong phú trong các ứng dụng AngularJS.

Directive ng-model

Directive ng-model trong AngularJS đóng vai trò trung tâm trong việc liên kết dữ liệu giữa giao diện người dùng và model. Đây là một công cụ cốt lõi giúp tự động cập nhật dữ liệu giữa phần mềm và giao diện.

Các Chức Năng Chính của ng-model:

Liên Kết Dữ Liệu Đa Hướng: ng-model tạo ra một kết nối hai chiều giữa model và view. Điều này đồng nghĩa với việc bất kỳ thay đổi nào trong giao diện người dùng sẽ được phản ánh ngay lập tức trong model và ngược lại.

Xác Thực Dữ Liệu: Ng-model cung cấp các cơ chế để xác thực dữ liệu nhập vào, như kiểm tra định dạng email hoặc xác định giá trị số. Điều này giúp đảm bảo tính chính xác và hợp lệ của dữ liệu được xử lý.

Điều Khiển và Thông Báo Lỗi: Khi dữ liệu không hợp lệ, ng-model có khả năng hiển thị thông báo lỗi, giúp người dùng nhận biết và sửa chữa sai sót.

Tùy Chỉnh Giao Diện: Ng-model còn có khả năng áp dụng các lớp CSS dựa trên trạng thái của dữ liệu, tạo ra các hiệu ứng giao diện động và thu hút.

Ví Dụ Minh Họa: Dưới đây là một ví dụ cụ thể minh họa cách sử dụng ng-model trong AngularJS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ng-model Demo</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userController">

    <h2>Liên Kết Dữ Liệu Đa Hướng:</h2>
    <input type="text" ng-model="userName" placeholder="Enter your name">
    <div>Your name: {{ userName }}</div>

    <h2>Xác Thực Tuổi:</h2>
    <input type="number" ng-model="userAge" placeholder="Enter your age">
    <div ng-show="userAge < 18">You are under 18 years old.</div>

    <h2>Định Dạng Email:</h2>
    <input type="email" ng-model="userEmail" placeholder="Enter your email">
    <div ng-show="!isValidEmail(userEmail)">Invalid email format.</div>

    <script>
        var app = angular.module("myApp", []);
        app.controller("userController", function($scope) {
            $scope.userName = "";
            $scope.userAge = 0;
            $scope.userEmail = "";

            $scope.isValidEmail = function(email) {
                var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailPattern.test(email);
            };
        });
    </script>

</body>
</html>

Trong ví dụ này, ng-model được sử dụng để liên kết dữ liệu nhập vào từ input với các biến trong $scope. Các chức năng kiểm tra tuổi và định dạng email được triển khai để đảm bảo dữ liệu đầu vào hợp lệ.

Directive ng-non-bindable

Directive ng-non-bindable trong AngularJS đóng vai trò ngăn chặn quá trình biên dịch tự động của biểu thức AngularJS, giữ nguyên nội dung biểu thức mà không chuyển đổi nó thành kết quả tính toán.

Cách Sử Dụng ng-non-bindable:

Khi sử dụng {{1 + 2}} trong một ứng dụng AngularJS, kết quả tính toán là 3 sẽ được hiển thị. Để hiển thị đúng nội dung {{1 + 2}} mà không bị biên dịch, ng-non-bindable là giải pháp thích hợp.

Ví Dụ Minh Họa:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-non-bindable Example</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="">
    <h2>Biểu thức bình thường và kết quả biên dịch:</h2>
    {{ 1 + 2 }}

    <h2>Ngăn chặn biên dịch với ng-non-bindable:</h2>
    <div ng-non-bindable>{{ 1 + 2 }}</div>

    <h2>Biểu thức với ng-bind-template:</h2>
    <div ng-bind-template="Kết quả: {{result1}} {{result2}}"></div>
</body>
</html>

Trong ví dụ này, ng-app khởi tạo một ứng dụng AngularJS đơn giản. Trong thân trang web:

  1. Biểu thức {{ 1 + 2 }}: AngularJS sẽ tính toán và hiển thị kết quả 3.
  2. <div ng-non-bindable>{{ 1 + 2 }}</div>: Sử dụng ng-non-bindable để giữ nguyên biểu thức mà không biên dịch.
  3. <div ng-bind-template="Kết quả: {{result1}} {{result2}}"></div>: Ví dụ về việc sử dụng ng-bind-template, nơi các biểu thức vẫn được biên dịch.

Kết quả khi xem trang web sẽ thể hiện rõ ràng sự khác biệt giữa các biểu thức được biên dịch và không được biên dịch.

Thông qua ví dụ này, người dùng có thể hiểu rõ về cách thức hoạt động của ng-non-bindable trong việc quản lý nội dung và biểu thức trong quá trình Data Binding trong AngularJS.

Sự khác biệt giữa One-way Binding và Two-way Binding trong AngularJS

Trong AngularJS Data Binding, có hai loại binding chính: One-way Binding và Two-way Binding. Dưới đây là sự khác biệt giữa hai loại binding này:

One-way Binding: One-way Binding là quá trình truyền dữ liệu từ model đến view hoặc ngược lại, nhưng chỉ diễn ra một chiều. Khi giá trị của model thay đổi, nó sẽ được cập nhật trên view tương ứng. Tuy nhiên, nếu giá trị trên view thay đổi, thì giá trị trong model không thay đổi. Ví dụ về One-way Binding là sử dụng biểu thức {{expression}} để hiển thị giá trị trên view.

Two-way Binding: Two-way Binding cho phép đồng bộ hóa giá trị giữa model và view cả hai chiều. Khi giá trị của model thay đổi, giá trị trên view sẽ được cập nhật và ngược lại, khi giá trị trên view thay đổi, giá trị trong model cũng sẽ được cập nhật. Ví dụ về Two-way Binding là sử dụng ngModel directive để liên kết dữ liệu giữa input và model.

Tùy thuộc vào yêu cầu của ứng dụng, chúng ta có thể sử dụng One-way Binding hoặc Two-way Binding để đồng bộ hóa dữ liệu giữa model và view. Lựa chọn đúng loại binding sẽ giúp ứng dụng của chúng ta hoạt động hiệu quả hơn và đáp ứng được các yêu cầu cụ thể.

Xem thêm Truyền dữ liệu cho các view trong Laravel

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now