AngularJS chọn plugin, đã chọn: cập nhật không hoạt động, hoạt động trong trình duyệt

Question

Tôi đã tích hợp plugin đã chọn vào ứng dụng angularjs của mình. App.js của tôi trông như thế này.

myApp.directive('chosen', function() { 

    var linker = function (scope, element, attr) { 
     scope.$watch('countriesList', function() { 
      $('#countries').trigger('chosen:updated'); 
      console.log('I acctuallty get in here'); 
     }) 
     element.chosen(); 
    }; 

    return { 
     restrict: 'A', 
     link: linker 
    }; 
}) 

chọn vẻ bề ngoài của tôi như thế này

<div class="control-group"> 
    <label for ="countries" class="control-label">Countries: </label> 
    <div class="controls"> 
    <select chosen ng-model="countries" id="countries" ng-options="country.name for country in countriesList" data-placeholder="Select Countries" multiple class="span chzn-select"></select> 
    </div> 
</div> 

Vấn đề là khi tải trang đầu tiên không có gì được hiển thị trong các lựa chọn. Các tùy chọn có khi bạn kiểm tra phần tử.

Chỉ có vẻ như chosen:updated không hoạt động. Tôi đặt console.log() trong đồng hồ và nó đang bắn. Nếu tôi chạy .trigger('chosen:updated') trong trình duyệt, nó hoạt động hoàn hảo. Tôi đã thử element.trigger nhưng điều đó cũng không hoạt động. Rất bực bội!

Answer 1

Bạn cần để cho Angular (thực sự là trình duyệt) hiển thị đúng cách trước khi gọi chosen. Bạn có thể thực hiện việc này bằng cách sử dụng setTimeout hoặc $timeout của Angular.

app.directive('chosen', function($timeout) { 

    var linker = function(scope, element, attr) { 

    $timeout(function() { 
     element.chosen(); 
    }, 0, false); 
    }; 

    return { 
    restrict: 'A', 
    link: linker 
    }; 
}); 

Đối số thứ ba false ngăn vòng lặp không cần thiết.

Demo:http://plnkr.co/edit/9Afq65uatTjnb4J6ICcB?p=preview

Nếu bạn cần thêm hoặc xoá các mục tự động này sẽ làm việc:

app.directive('chosen', function($timeout) { 

    var linker = function(scope, element, attr) { 

    scope.$watch('countriesList', function() { 
     $timeout(function() { 
     element.trigger('chosen:updated'); 
     }, 0, false); 
    }, true); 

    $timeout(function() { 
     element.chosen(); 
    }, 0, false); 
    }; 

    return { 
    restrict: 'A', 
    link: linker 
    }; 
}); 

Demo:http://plnkr.co/edit/rEBu6d3HtaNhThWidB5h?p=preview

Lưu ý rằng theo mặc định $watch sử dụng bình đẳng tham khảo để xác định xem có nên thực thi người nghe hay không. Nếu bạn thêm một mục vào mảng, biến số countriesList sẽ vẫn tham chiếu đến cùng một mảng, vì vậy người nghe sẽ không thực thi.

Đối số thứ ba true được chuyển đến $watch làm cho nó sử dụng angular.equals thay vì bình đẳng tham chiếu.