Bộ lọc góc không cập nhật khi thay đổi thuộc tính dịch vụ

Question

Có lẽ đây là một sự hiểu lầm cơ bản về phạm vi Góc, nhưng ở đây đi.

Tôi có một dịch vụ để xử lý thay đổi một tuỳ chọn ngôn ngữ:

languageService.js

function languageService() { 
    var language = "en"; 

    var service = { 
    getLanguage: getLanguage, 
    setLanguage: setLanguage 

    }; 

    function getLanguage() { 
    return language; 
    } 

    function setLanguage (newLang) { 
    language = newLang; 
    } 

    return service; 
} 

Tôi cũng có một bộ lọc định dạng một cái gì đó:

someFilter.js

function myFilter(languageService) { 
    return function(num) { 
    var french = languageService.getLanguage() === 'fr'; 

    if (french) { 
     return "is french!" 
    } else { 
     return "is other." 
    } 
    }  
} 

Tôi cố gắng sử dụng bộ lọc này trong một số HTML: Blah blah {{ 'test' | someFilter }}.

Nó hoạt động, nhưng chỉ khi tải; nếu tôi gọi setLanguage('en'), sự ràng buộc không thay đổi.

Answer 1

Thực tế có hai vấn đề với mã của bạn.

Trước tiên, trong dịch vụ, bạn nên kích hoạt thông báo khi biến thể của bạn thay đổi. Vì vậy, nó sẽ là

myApp.factory('languageService', ['$rootScope', function ($rootScope) { 
    var language = "en"; 

    var service = { 
    getLanguage: getLanguage, 
    setLanguage: setLanguage 

    }; 

    function getLanguage() { 
    return language; 
    } 

    function setLanguage (newLang) { 
    language = newLang; 
    $rootScope.digest(); 
    } 

    return service; 
}]); 

Thứ hai và tinh tế hơn. Trong góc, bộ lọc chỉ được cập nhật nếu giá trị bạn vượt qua trong các thay đổi đánh dấu (trong trường hợp của bạn là 'kiểm tra'), cho bất kỳ thay đổi nào khác đối với phạm vi bộ lọc của bạn sẽ bị bỏ qua hoàn toàn.

Giải pháp là buộc góc để phân tích cú pháp bộ lọc cụ thể đó trên bất kỳ thông báo nào.

myApp.filter('someFilter', ['localeService', function (localeService) { 
    function filter (value) { 
    var french = languageService.getLanguage === 'fr'; 

    if (french) { 
     return "is french!" 
    } else { 
     return "is other." 
    } 
    } 

    filter.$stateful = true; // This line does the trick 

    return filter; 
}]); 

Bạn có thể nhận được thông tin thêm về các Angular Docs