Phản ứng trên các sự kiện góc trong một chỉ thị mà không cần tiêm $ rootScope

Question

Tôi tự hỏi nếu bạn có ví dụ về mã chỉ thị phản ứng trên các sự kiện góc như $routeChangeError mà không cần tiêm $rootScope vào nó (để sử dụng $on trong hàm liên kết). Nó phá vỡ trong mô hình MV * ý kiến ​​của tôi và "tạo ra" mã mùi (cho khả năng điều khiển phạm vi gốc trong một chỉ thị). Cảm ơn trước.

Answer 1

Nếu bạn chỉ đang nghe các sự kiện, bạn không phải sử dụng số $rootScope; làm ví dụ $scope.$on("$routeChangeError") trên phạm vi của chỉ thị, từ bộ điều khiển hoặc chức năng liên kết.

Bạn thấy số "$routeChangeError" được phát sóng từ $rootScope, vì vậy tất cả trẻ em đều nhận được.

Answer 2

Không. Không có cách nào để nghe sự kiện Góc mà không có quyền truy cập vào $scope. Đó là một trong những lý do chính họ có dịch vụ $rootScope, để bạn có thể truy cập vào $scope khi đang ở trong một dịch vụ hoặc một số mô-đun khác.

Tuy nhiên, theo chỉ thị, bạn không cần phải tiêm $rootScope vì bạn đã có phạm vi cách ly trong chỉ thị trong hàm liên kết.

Ví dụ:

.directive('myDirective', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs){ 
      scope.$on('some-event', function(e){ 
       // respond to event here 
      }); 
     } 
    }; 
}); 

biến scope của bạn là một "cô lập" phạm vi nên không thể ảnh hưởng đến phạm vi mẹ của nó trong bất kỳ cách nào. Tuy nhiên, điều này có một số tác dụng phụ lạ nếu bạn đang cố gắng phát ra một sự kiện cho một số mô-đun cấp độ chị em, bởi vì các sự kiện Góc chỉ $emit trở lên hoặc $broadcast xuống dưới thông qua phân cấp phạm vi. Nếu không, thì ví dụ trên sẽ hoạt động hoàn hảo. Nếu bạn đang có, sau đó ví dụ sau đây là một cách để làm điều đó:

.directive('myDirective', function($rootScope){ 
    var isolateScope = $rootScope.new(); // creates a new isolate copy of $rootScope 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs){ 
      isolateScope.$on('some-event', function(e){ 
       // respond to event here 
      }); 
     } 
    }; 
}); 

này sẽ tạo ra một bản sao cô lập tương tự $rootScope để cho bất kỳ thay đổi bạn thực hiện cho nó sẽ không ảnh hưởng đến các module hoặc các dịch vụ khác. Điều này sẽ ngăn chặn bất kỳ vấn đề nào với "smell-code" như bạn đã gọi.

Answer 3

$on phương pháp được định nghĩa trên nội Scope.prototype, và vì mỗi phạm vi trong góc được tạo ra từ Scope constructor này có nghĩa là mỗi phạm vi có một phương pháp $on sẵn trên chính nó. Không cần phải tiêm $rootScope, chỉ cần gọi phương thức $on trên chỉ thị liên kết phạm vi chức năng của trực tiếp:

app.directive('myDirective', function(){ 
    return function(scope, element, attrs){ 
    scope.$on('$routeChangeError', function(){ 
     // ... 
    }); 
    } 
});