Cách sử dụng đúng $scope trong AngularJS(P2)

4.Hạn chế gán một chức năng vào một $scope

Trong tài liệu AngularJS, các hướng dẫn và các ví dụ mẫu đều hướng dẫn chúng ta làm thế nào để sử dụng các function trong một template bằng cách gán cho một biến $scope. Điều này không có gì sai nhưng nó không được thực hiện một cách đúng nhất dẫn đến việc bảo trì code khó.

Khi viết code cho một function directives, chúng ta thường hạn chế việc sử dụng dư liệu liên quan đến các hoạt động trong directive.

Directives được thiết kế có các controller để có thể điều khiển các hành động cho các directives con giống như các service API, nhưng chúng ta có thể thấy các controllers có thể quản lý tốt hơn các function trong template.

Các vấn đề phổ biến nhất với function $scope

• Khó khăn để nói cho mà chức năng cần phải có trong một controller.
• Các chức năng thường sử dụng các biến từ bên ngoài funtion đóng (như trong các cặp template, , function đóng cửa và các funtions liên kết).
• Scope thường chứa các chức năng đều logic, xử lý dữ liệu và template.
• Thêm vào sự đồng lõa của một chỉ thị mà không cải thiện khả năng bảo trì.
• Các developer thường sử dụng lại tên cùng chức năng như save(), open() và update() và điều này làm cho các kết nối giữa một template và directive khó nhìn thấy.

Sử dụng một function từ controller

<div ng-controller="InventoryController as inventory">
     <button ng-click="inventory.Save()">Save</button>
</div>

Sử dụng một controller đóng gán cho một scope

<div inventory>
     <button ng-click="Save()">Save</button>
</div>

Vậy 2 ví dụ trên ví dụ nào tốt hơn? Trong ví dụ thứ 2 Directive inventory đã gán một function đóng tên là Save cho $scope, nhưng chúng ta không thể chắc chắn 100% cho đến khi chúng ta thực sự nhìn thấy mã nguồn trong Directive. Đó là vấn đề với scope trong các Directives trong hệ thống phân cấp DOM khi gán các funtions đóng, và các HTML template không thể cho bạn biết một scope là isolated scopes, inherited scope hay là một scope mới.

Với việc sử dụng Controller funtions, chúng ta có thê dễ dàng biết phương thức Save() đã được gọi và chúng ta có thế mở controller đó lên và bắt đầu làm việc với phương thức đó. Tên của controller as inventory như là một namespace bên trong các templates, giúp các developer hiểu logic từ cái tên.

Đó là lý do tại sao các funtion đóng gán cho các scope làm giảm khả năng bảo trì và phải nên tránh. Các dự án nhỏ nó không có việc lớn, nhưng một khi chúng ta có hàng trăm Directive và tất cả mọi người đều sử dụng tên các chức năng tương tự như Save (). Từ đó sẽ gấy khó khăn và nhầm lẫn cho việc bào trì.

5.Sử dụng $destroy

AngularJS xử lý các unbinding trong hầu hết các phần tự động cho bạn.

Khi gắn vào các yếu tố DOM bên ngoài hệ thống các Directive. Những lắng nghe sự kiện sẽ vẫn hoạt động sau khi các directive đã bị phá hủy. Vì vậy, chúng ta phải loại bỏ chúng khi $destroy được sử dụng.

Ví dụ sau đây của mã nguồn minh họa vấn đề thường gặp này. Các mã nguồn lắng nghe cho các sự kiện thay đổi kích cỡ cửa sổ, nhưng để xử lý sự kiện kèm theo sau directive khi bị phá hủy.

app.directive('resizable',function(){
  return {
    link: function($scope, $el) {
      $(window).bind('resize',function(){
        // do some resize
       });
    }
});

Chúng ta có unbind để loại bỏ các listeners

app.directive('resizable',function($window){
    return {
        link: function($scope, $el) {
           angular.element($window).bind('resize.'+$scope.$id,function(){
               // do some resize stuff
           });
           $scope.$on('$destroy',function(){
               angular.element($window).unbind('resize.'+$scope.$id);
           });
        }
});

5. Sử dụng $scope.$watch thay thế cho element.bind

$(window).bind('resize.',function(){
  $scope.width = window.innerWidth;
  $scope.height = window.innerHeight;
  $scope.$apply();
});

Trong ví dụ trên chúng ta sử dụng một thư viên thứ 3 để nghe các sự kiện xảy ra bên ngoài AngularJS. Khi phương thức được thực thi, scope được cập nhật và gọi phương thức $scope.$apply() là cần thiết để các thay đổi có hiệu lực.

Sử dụng $scope.$watch quản lý trạng thái của các đổi tượng trên màn hình và sẽ chỉ cập nhật scope khi AngularJS đang trong chu kỳ.

$scope.$watchGroup(function() {
     return [$window.innerWidth,$window.innerHeight];
   },function(values) {
     $scope.width = values[0];
     $scope.height = values[1];
});

lợi ích của việc sử dụng $scope.$watch

• Không thêm bất kỳ việc làm thêm cho AngularJS
• Chỉ cập nhật các phạm vi khi chỉ thị được tiêu hóa.
• Chức năng watcher chỉ được gọi khi các giá trị thay đổi.
• Tạo ra một directive hướng dữ liệu thay vì định hướng sự kiện.