Bootstrap-select mit AngularJS verwenden

Question

Ich versuche http://silviomoreto.github.io/bootstrap-select/ zu meiner AngularJS-Anwendung zu implementieren.

Die meisten Leute, die versuchen und das gleiche tun, sie haben jedes Problem, das der selectpicker gesetzt wird, bevor Angular die Daten erhält. Aber für mich ist das nicht der Fall. Wenn Select Picker ausgelöst wird, enthält meine Auswahl alle Daten, aber aus irgendeinem Grund feuert das Dropdown-Umschalt-Ereignis nicht.

HTML:

<select id="partyRole" name="partyRole" class="form-control" ng-model="partyRole" ng-options="role as role.text for role in partyRoles"> 
    <option value="">Please Select...</option> 
</select> 

Die JS Anrufe fügt selectpicker allen meinen wählt.

JS:

$(window).bind("load", function() { 
    return $('select').selectpicker(); 
}); 

Ich verwende diese Richtlinie auch die selectpicker Daten zu binden:

https://github.com/joaoneto/angular-bootstrap-select/blob/master/build/angular-bootstrap-select.js

Finale UI

Wie Sie sehen können, wird das div vom selectpicker erzeugt und ich bekomme auch alle Daten .. Aber das Klicken auf den Knopf tut nichts.

Ich habe Angular UI, Angular JS in der Anwendung mit Bootstrap Stylesheets.

EDIT:

Nevermind, die Version der Winkel Richtlinie I von Github heruntergeladen war wahrscheinlich in einem gebrochenen Zustand, denn nachdem ich es von den heutigen aktualisierten Code angewendet .. es funktionierte.

Answer 1

Sie möchten in der Regel keine jQuery in einer Datei und AngularJS in einer anderen Datei haben. Wenn jQuery Elemente usw. erstellt, werden sie wahrscheinlich nicht von angular aufgenommen.

Die richtige Lösung ist die Verwendung einer Winkeldirektive. Hier sieht es wie somebody made one for you aus.

Answer 2

function Selectpicker() { 
    return { 
     restrict: 'C', 
     link: function($scope, $element) { 
      $element.selectpicker(); 
     } 
    }; 
}