Seçilmiş Açısal direktifi

Question

Ben Seçilmiş ve Açısal İşte

benim direktifi olup (kod aynı hemen hemen) bu büyük öğretici ( link) izlediyseniz güncellenen almaz html: kullanıcı düzenlemesi düğmesini tıkladığında

I istediğim şey

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

, kalıcı pencere düzenle düğmesine tıklamadan önce seçilmiş yerlerde, modal pencerede seçildiğini açılır ve kategoriler. İşte

kontrolörün bir parçası mı: Ben $ scope.selectedCategories giriş yaptıktan

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

ve her şeyi onlarla iyi, ama nedense seçilen seçilen hiçbir şey yoktur.

Neyi yanlış yapıyorum ve nasıl düzeltebilirim?

DÜZENLEME Ben bazı öğeleri, yakın modal seçtiğimde fark ettik

i koymak olsa tekrar açın, seçilen değerler yine arife vardır $ içinde bu hat izlemek

$scope.selectedCategories = ""; 

EDIT 2

Bu sorunu bir süreliğine bıraktım çünkü başa çıkmak için daha önemli şeylerim vardı. Seçilmeden denedim, yani "normal" select ve code works kullanarak. Yani kesinlikle benim seçilmiş direktifim gerektiği gibi çalışmıyor.

Answer 1

Bunu çözdüm, çözüm oldukça kolay ve basittir (Angular direktiflerinin nasıl çalıştığını öğrendiğinizde). İşte yönergenin tamamı:

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

Yorumun daha genişletilmiş bir önceki sürümüne sürümü. Yazar olarak aynı, HTML işaretlemesinde chosen="vm.myCollection" gibi kaynak koleksiyonunu sağlarım, aslında regexp ile ng-options veya ng-repeat özelliğinin ayrıştırılması daha iyidir, belki daha sonra. OP'den farklı olarak, bir dizi için $ watchCollection kullanıyorum ve kapsam yok etmek üzereyken beklemeden arama yapıyorum.

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