Đơn vị kiểm tra chỉ thị AngularJS xem một thuộc tính với phạm vi cô lập

Question

Tôi có chỉ thị sử dụng phạm vi cách ly để chuyển dữ liệu sang chỉ thị thay đổi theo thời gian. Nó theo dõi những thay đổi về giá trị đó và thực hiện một số tính toán trên mỗi thay đổi. Khi tôi cố gắng đơn vị kiểm tra các chỉ thị, tôi không thể nhận được chiếc đồng hồ để kích hoạt (tỉa cho ngắn gọn, nhưng khái niệm cơ bản được trình bày dưới đây):

Chỉ thị:

angular.module('directives.file', []) 
.directive('file', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     data: '=', 
     filename: '@', 
    }, 
    link: function(scope, element, attrs) { 
     console.log('in link'); 
     var convertToCSV = function(newItem) { ... }; 

     scope.$watch('data', function(newItem) { 
     console.log('in watch'); 
     var csv_obj = convertToCSV(newItem); 
     var blob = new Blob([csv_obj], {type:'text/plain'}); 
     var link = window.webkitURL.createObjectURL(blob); 
     element.html('<a href=' + link + ' download=' + attrs.filename +'>Export to CSV</a>'); 
     }, true); 
    } 
    }; 
}); 

Test:

describe('Unit: File export', function() { 
    var scope; 

    beforeEach(module('directives.file')); 
    beforeEach(inject(function ($rootScope, $compile) { 
    scope = $rootScope.$new(); 
    }; 

    it('should create a CSV', function() { 
    scope.input = someData; 
    var e = $compile('<file data="input" filename="filename.csv"></file>')(scope); 
    //I've also tried below but that does not help 
    scope.$apply(function() { scope.input = {}; }); 
    }); 

Tôi có thể làm gì để kích hoạt đồng hồ để báo cáo gỡ lỗi "Theo dõi" của tôi được kích hoạt? My "In link" được kích hoạt khi tôi biên dịch.

Answer 1

Để có được kích hoạt $watch, chu kỳ tiêu hóa phải xuất hiện trên phạm vi được xác định hoặc trên cha mẹ của nó. Vì chỉ thị của bạn tạo ra một phạm vi cô lập, nó không kế thừa từ phạm vi gốc và do đó người theo dõi của nó sẽ không được xử lý cho đến khi bạn gọi $apply trên phạm vi thích hợp.

Bạn có thể truy cập vào phạm vi chỉ thị bằng cách gọi scope() trên các yếu tố được trả về bởi các dịch vụ $compile:

scope.input = someData; 
var e = $compile('<file data="input" filename="filename.csv"></file>')(scope); 
e.isolateScope().$apply(); 

jsFiddler này minh họa đó.