[AngularJS toàn tập] Phần 12 : sự khác biệt giữa ng-bind, ng-bind-html, ng-bind-template

Bài đăng này đã không được cập nhật trong 3 năm

[AngularJS toàn tập] Phần 12 : sự khác biệt giữa ng-bind, ng-bind-html, ng-bind-template

Nếu bạn là người theo dõi các bài viết trước của mình thì chắc hẳn các bạn đã thấy mình sử dụng ng-bind ở rất nhiều ví dụ, và chắc hẳn các bạn cũng không còn thấy xa lạ gì với directive này nữa. Tuy nhiên mình vẫn muốn viết những bài viết riêng, chi tiết hơn để các bạn có thể hiểu và tìm hiểu kĩ hơn về angularJS, về directive ng-bind.

1. ng-bind

Khi một thẻ HTML nào đó có sử dụng ng-bind thì AngularJS sẽ tim và thay thế nội dung bên trong thẻ HTML đó bởi một giá trị nào đó mà có cùng tên định nghĩa (tôi gọi là biểu thức A), khi biểu thức A này thay đổi thì trong thẻ HTML vẫn sẽ thay đổi theo (cơ chế liên kết binding). Cõ nghĩa là Ng-bind sẽ được biên dịch ở cấp 0, cấp đầu tiên của ứng dung.

Trên thực tế chúng ta không nên sử dụng cơ chế ng-bind một cách trực tiếp, thay vào đó sử dụng quy tắc mở hai cặp dấu ngoặc nhọn {{key}}. Tốt hơn hết là nên sử dụng ng-bind trong trường hợp ta kết hợp với ng-model và ng-model-options, nếu bạn chưa rõ thì quay lại hai bài này và đọc các ví dụ nhé.

Ví dụ sử dụng ng-bind

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <style>*{margin:0}body{padding:20px}</style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script language="javascript">
            angular.module('myapp', [])
            .controller('bindingController', ['$scope', function($scope) {
                 
            }]);
        </script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="bindingController">
            <form name="userForm">
                <h5>Nhập nội dung của bạn nào</h5>
                <input type="text" name="userName" ng-model="name"/><br />
                <h5>Chuỗi mà bạn đang nhập là:</h5>
                <span ng-bind="name"></span>
            </form>
        </div>
    </body>
</html>

Xem demo tại đây https://jsfiddle.net/SonCheDinh/9wfv9Lvp/

Ví dụ không sử dụng ng-bind

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <style>*{margin:0}body{padding:20px}</style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script language="javascript">
            angular.module('myapp', [])
            .controller('bindingController', ['$scope', function($scope) {
                 
            }]);
        </script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="bindingController">
            <form name="userForm">
                <h5>Nhập nội dung của bạn nào</h5>
                <input type="text" name="userName" ng-model="name"/><br />
                <h5>Chuỗi mà Bạn đang nhập là:</h5>
                <span>{{name}}</span>
            </form>
        </div>
    </body>
</html>

Xem demo tại đây https://jsfiddle.net/SonCheDinh/7bewzsyq/

Vậy lúc nào thì nên dùng ng-bind, lúc nào không nên?

Theo mình thì sử dụng ng-bind nếu như bạn muốn quản lý được quá trình lưu model vào $scope, còn không thì sử dụng {{name}} sẽ đơn giản và tốt hơn.

2. Ng-bind-html

Trong một số trường hợp bạn rất muốn nhập html và hiển thị ra ở dạng html thì sao?

Quay lại ví dụ trên bạn thử nhập nội dung là thẻ HTML xem kết quả như thế nào? Nó sẽ in dạng text ra luôn chứ không hiểu chúng ta đang nhập thẻ HTML. Vậy giờ ta muốn nhập nội dung nếu là thẻ HTML thì khi in ra trình duyệt sẽ ở dạng HTML chứ không phải dạng text như trên? Bài toán này được giải quyết bởi Directive ngBindHtml trong AngularJS.

Chú ý :

Directive ng-bind-html sử dụng thêm một thư viện phụ có tên là sanitize nên bắt buộc a phải thêm nó vào thì chương trình mới chạy.

Phải khai báo cho ứng dụng biết có sử dụng thư viện phụ này bằng cách thêm tên của nó (ngSanitize) vào trong danh sách các object có sử dụng ở hàm angular.module (cú pháp là angular.module('tenModule', [danh_sach_object]))

Bạn có thể xem ví dụ sau đây để hiểu rõ hơn.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <style>*{margin:0}body{padding:20px}</style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
        <script language="javascript">
            angular.module('myapp', ['ngSanitize'])
                    .controller('ExampleController', ['$scope', function($scope) {
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="ExampleController">
            <input type="text" ng-model="myHTML"/>
            <p ng-bind-html="myHTML"></p>
        </div>
    </body>
</html>

Xem demo tại đây https://jsfiddle.net/SonCheDinh/tLdnopbq/

Lúc này nếu bạn nhập vào các thẻ html thì nó sẽ được hiển thị ra dạng html chứ không phải dạng text.

3. ng-bind-template

Khi nói đến template có lẽ bạn cũng hình dung đến những template engine mà ta thường hay sử dụng, đừng hiểu nhầm nó, trong này tuy chức năng tương tự nhưng hình thức load không giống nhau. Khi ứng dụng chạy thì Directive này được thực thi luôn nên cấp độ thực thi của nó = 0 (đầu tiên).

Directive ngBindTemplate sẽ xác định nội dung cần replace thông qua cú pháp biểu thức trong angular {{tenkey}}, không giống như ngBind, ngBindTemplate có thể chứa nhiều biểu thức trong nó, ví dụ như ng-bind-template="{{header}}{{foooter}}". Ng-bind-template này rất cần thiết với các thẻ mà nội dung bên trong nó không thẻ chứa các thẻ HTML như (title, option, meta).

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive</title>
        <style>*{margin:0}body{padding:20px}</style>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            angular.module('myapp', [])
                    .controller('ExampleController', ['$scope', function($scope) {
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <div ng-controller="ExampleController">
            Name <input type="text" ng-model="name"><br>
            Website: <input type="text" ng-model="website"><br>
            <pre ng-bind-template="{{name}} {{website}}!"></pre>
        </div>
    </body>
</html>

Xem demo tại đây https://jsfiddle.net/SonCheDinh/tm43ms0f/

Bài này đến đây là kết thúc, chắc bạn đã hiẽu rõ hơn sự khác biệt giữa ng-bind, ng-bind-html, ng-bind-template. Hẹn gặp lại các bạn ở bài sau.

AngularJS