AngularJS चयनित प्लगइन, चुना गया: अपडेट नहीं किया गया, ब्राउज़र में काम करता है

Question

मैंने चुने हुए प्लगइन को मेरे कोणीय ऐप में एकीकृत किया है। मेरा app.js इस तरह दिखता है।

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 
    }; 
}) 

इस

<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> 

की तरह मेरे चयन दिखता समस्या है जब पेज के पहली बार लोड कुछ भी नहीं का चयन में प्रदर्शित किया जाता है। जब आप तत्व का निरीक्षण करते हैं तो विकल्प वहां होते हैं।

chosen:updated बस काम नहीं कर रहा है। मैंने घड़ी में console.log() लगाया और यह फायरिंग है। यदि मैं ब्राउज़र में .trigger('chosen:updated') चलाता हूं तो यह पूरी तरह से काम करता है। मैंने element.trigger कोशिश की लेकिन यह भी काम नहीं किया। कितना निराशाजनक!

Answer 1

आपको chosen पर कॉल करने से पहले एंगुलर (वास्तव में ब्राउज़र वास्तव में) को सही तरीके से प्रस्तुत करने की आवश्यकता है। आप setTimeout या कोणीय के $timeout का उपयोग करके ऐसा कर सकते हैं।

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

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

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

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

तीसरा तर्क false एक अनावश्यक पचाने पाश से बचाता है।

डेमो:http://plnkr.co/edit/9Afq65uatTjnb4J6ICcB?p=preview

आप जोड़ सकते हैं या आइटम हटाने के लिए की जरूरत है गतिशील रूप से इस काम करेगा:

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 
    }; 
}); 

डेमो:http://plnkr.co/edit/rEBu6d3HtaNhThWidB5h?p=preview

ध्यान दें कि डिफ़ॉल्ट $watch द्वारा संदर्भ समानता का उपयोग करता है यह निर्धारित करने के लिए कि श्रोता को निष्पादित करना है या नहीं। यदि आप सरणी में कोई आइटम जोड़ते हैं तो वेरिएबल countriesList अभी भी उसी सरणी को संदर्भित करेगा, इसलिए श्रोता निष्पादित नहीं होगा।

तीसरा तर्क true$watch पर पारित किया गया है, यह संदर्भ समानता के बजाय angular.equals का उपयोग करता है।