選ばれた角度ディレクティブは

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

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

私がしたいことは、ユーザが編集ボタンをクリックすると、モーダルウィンドウがポップアップし、で、編集ボタンをクリックする前に選択した場所をカテゴリは、モーダルウィンドウで選択されています。ここで

は、コントローラの部分である：

$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を記録してきたし、すべてが彼らと罰金ですが、いくつかの理由で選ばれた中で何も選択されていません。

私は間違って何をしていますか？どのように修正できますか？

EDIT

私は$見る

$scope.selectedCategories = ""; 

内のこの行を入れても、私はいくつかの項目を選択すると、近くにモーダルは、再びそれを開く気づいた、選択された値が再び前夜ありますEDIT 2

私はこの問題をしばらく残しました。なぜなら、私はより重要なことに対処する必要があったからです。 私は選択せずに試しました。つまり、「通常の」選択とコードを使用しています。だから、確かに私の選ばれた指令は、それがうまくいくわけではありません。

Answer 1

私はそれを解決しましたが、実際には（Angularディレクティブの仕組みを理解すると）非常に簡単で簡単です。

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

これまでのソリューションのコメントの拡張バージョンです。 投稿者と同じですが、HTMLマークアップでchosen="vm.myCollection"のようなソースコレクションを提供していますが、実際にはng-optionsまたはng-repeatというプロパティをregexpで解析する方が良いかもしれません。 OPとは対照的に、配列に対して$ 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(); 
       }); 
      } 
     }; 
    } 
}());