2013-08-15 16 views
8

I już po tę wielką samouczek (link) dla wybranych i kątowe (kod jest prawie taka sama)Chosen kątowa dyrektywa nie zostanie zaktualizowany

Oto moja dyrektywa:

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

Oto html:

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

Co chcę jest, gdy użytkownik kliknie przycisk edycji, modalne okno wyskakuje i kategorie, w których wybiera się zanim klikniesz przycisk edycji, są wybierane w modalnego okna.

Oto część regulatora:

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

Mam zalogowany $ scope.selectedCategories i wszystko jest w porządku z nimi, ale z jakiegoś powodu nie ma nic wybrany wybrany.

Co więc robię źle i jak mogę to naprawić?

EDIT

Zauważyłem kiedy wybrać kilka przedmiotów, zamknij Modal, otworzyć go ponownie, wybrane wartości są tam ponownie przeddzień chociaż mogę umieścić ten wiersz wewnątrz $ oglądać

$scope.selectedCategories = ""; 

EDYTOWANIE 2

Więc zostawiłem ten problem przez jakiś czas, ponieważ miałem ważniejsze sprawy do załatwienia. Próbowałem bez wybranego, tj. Przy użyciu "normalnego" wyboru i kodu działa. Ostatecznie moja wybrana dyrektywa nie działa tak, jak powinna.

Odpowiedz

11

Rozwiązałem to, rozwiązanie jest dość proste i proste (kiedy już działają instrukcje Angular). Oto cały kod dyrektywy:

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

To jest dokładnie to, czego szukałem, wielkie dzięki! – abhishekgarg

+0

To naprawdę powinna być część wybranej dyrektywy, moim zdaniem, zmuszanie użytkownika biblioteki do robienia takich rzeczy jest po prostu dziwne. – Millenjo

+0

Właściwie w kolekcji należy użyć 'scope. $ WatchCollection (list, func)', a także '$ watch *' zwraca funkcję, aby zatrzymać oglądanie, które powinno zostać wywołane, gdy '$ scope' niszczy:' scope. $ On ('$ destroy', function() { unwatchModel(); unwatchSource(); }); ' – Hikiko

1

Bardziej rozbudowana wersja komentarza do poprzedniego rozwiązania. Taki sam jak autor, w znacznikach HTML Zapewniam kolekcję źródłową, taką jak chosen="vm.myCollection", właściwie parsowanie ng-options lub ng-repeat Właściwość z regexp jest lepsza, może później. W przeciwieństwie do OP, używam $ watchCollection dla tablicy i wywołuję odrzuty, gdy zasięg ma się zniszczyć.

(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(); 
       }); 
      } 
     }; 
    } 
}()); 
Powiązane problemy