चुना कोणीय निर्देश अद्यतन नहीं करता

Question

मैं चुना और कोणीय

यहाँ मेरी निर्देश है (कोड काफी समान है) के लिए इस महान ट्यूटोरियल (link) का पालन किया है:

app.angularModule.directive('chosen', function() { 
    var linker = function (scope, element, attrs) { 
     var list = attrs['chosen']; 

     scope.$watch(list, function() { 
      element.trigger('chosen:updated'); 
     }); 

     element.chosen({ width: '350px'}); 
    }; 

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

यहाँ है एचटीएमएल:

<select data-placeholder="Choose a Category" multiple class="col-lg-8 chosen-select" chosen="items" 
          ng-options="item._backingStore.Name for item in items" ng-model="selectedCategories" > 
        </select> 

मैं क्या चाहता हूँ, जब उपयोगकर्ता संपादित करें बटन क्लिक करता है, मोडल पॉपअप विंडो खुलेगी, श्रेणियों को जहां संपादित करें बटन क्लिक करने से पहले चयन किया है, मोडल विंडो चुने गए हैं।

यहाँ नियंत्रक का वह हिस्सा है:

$scope.$watch(function() { return adminCrudService.getCategoriesForUpdate(); }, function() { 
       $scope.action = "edit"; 
       $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate(); 
       if ($scope.categoriesForUpdate.length > null) { 
        $scope.selectedCategories = _.filter($scope.items, function (item) { 
         return _.contains($scope.categoriesForUpdate, item); 
        }); 
       } 
      }); 

मैं $ scope.selectedCategories प्रवेश करने के बाद और सब कुछ उनके साथ ठीक है, लेकिन किसी कारण के लिए चुना में चयनित कोई बात नहीं है।

तो मैं गलत क्या कर रहा हूं और मैं इसे कैसे ठीक कर सकता हूं?

संपादित

मैंने देखा है जब मैं कुछ आइटम, पास मोडल का चयन करें, इसे फिर से खोलने के लिए, चयनित मानों वहाँ फिर पूर्व संध्या हालांकि मैं डाल रहे हैं $ के अंदर इस लाइन को देखने के

$scope.selectedCategories = ""; 

संपादित करें 2

इसलिए मैंने थोड़ी देर के लिए इस समस्या को छोड़ दिया, क्योंकि मेरे पास इससे निपटने के लिए और अधिक महत्वपूर्ण चीजें थीं। मैंने चुने बिना कोशिश की है, यानी "सामान्य" चयन और कोड काम का उपयोग कर। तो निश्चित रूप से मेरे चुने हुए निर्देश काम नहीं करते हैं जैसा कि इसे करना चाहिए।

Answer 1

मैंने इसे हल कर लिया है, समाधान वास्तव में बहुत आसान और सीधा है (जब आप एंगुलर निर्देश कैसे काम करते हैं)। निर्देश के लिए यहां पूरा कोड दिया गया है:

app.angularModule.directive('chosen', function() { 
    var linker = function (scope, element, attrs) { 
     var list = attrs['chosen']; 

     scope.$watch(list, function() { 
      element.trigger('chosen:updated'); 
     }); 

     scope.$watch(attrs['ngModel'], function() { 
      element.trigger('chosen:updated'); 
     }); 

     element.chosen({ width: '350px'}); 
    }; 

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

Answer 2

पिछले समाधान पर टिप्पणी का अधिक विस्तारित संस्करण। एचटीएमएल मार्कअप में लेखक के रूप में, मैं chosen="vm.myCollection" जैसे स्रोत संग्रह प्रदान करता हूं, वास्तव में रीज़ेक्स के साथ ng-options या ng-repeat संपत्ति को पार्सिंग बेहतर है, शायद बाद में। ओपी के विपरीत, मैं एक सरणी के लिए $ watchCollection का उपयोग करता हूं, और जब स्कोप नष्ट होने वाला होता है तो अनचाहे कॉल करें।

(function() { 
    'use strict'; 
    angular.module('common.directives').directive('chosen', enterPressDirective); 

    function enterPressDirective() { 
     return { 
      restrict: 'A', 
      link: function (scope, elm, attrs) { 
       var unwatchModel = scope.$watch(attrs.ngModel, function() { 
        elm.trigger('chosen:updated'); 
       }); 

       var unwatchSource = scope.$watchCollection(attrs.chosen, function() { 
        elm.trigger('chosen:updated'); 
       }); 

       elm.chosen(); 

       scope.$on('$destroy', function() { 
        unwatchModel(); 
        unwatchSource(); 
       }); 
      } 
     }; 
    } 
}());