anuglar選擇localytics不工作

Question

我正在嘗試使用Angular和選擇創建一個selecbox。而我似乎無法得到它的工作。我覺得我仍然在上傳錯誤的腳本，但不知道如何上傳正確的腳本。我已經安裝使用涼亭選擇。首先我試過：

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-chosen-localytics/chosen.js"></script> 

angular.module('myApp', ['localytics.directives']) 

但是後來我得到一個錯誤，說elemnt.chosen是未定義的。我讀過這發生在加載jquery後加載angular。所以我嘗試過：

<script src="bower_components/angular-chosen-localytics/chosen.js"></script> 
<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/angular/angular.js"></script> 

但是這不起作用，因爲角度沒有定義。我發現我有兩個獨立的涼亭組件，實際的Chosen組件和角度選擇的指令組件。所以我添加了選定的腳本以及：

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-chosen-localytics/chosen.js"></script> 
<script src="bower_components/chosen/chosen.jquery.js"></script> 
<script src="bower_components/chosen/chosen.proto.js"></script> 
<script src="bower_components/angular-chosen-localytics/chosen.js"></script> 

錯誤消失，但元素不起作用。我得到一個沒有選項和格式不正確的文本的簡單欄。有誰知道我做錯了什麼？

元素不起作用：

<select chosen 
    data-placeholder="Pick one of these" 
    disable-search="true" 
    allow-single-deselect="true"> 
    <option value=""></option> 
    <option>This is fun</option> 
    <option>I like Chosen so much</option> 
    <option>I also like bunny rabbits</option> 
</select> 

Answer 1

編輯

對於我這個順序工作：

CSS：

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
<link rel="image_src" href="bower_components/chosen/chosen-sprite.png"> 
<link rel="stylesheet" href="bower_components/chosen/chosen.css"/> 
<link rel="stylesheet" href="styles/chosen-bootstrap.css"/> 

如果選擇自舉的CSS在這裏找到：https://gist.github.com/koenpunt/6424137

腳本：

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/chosen/chosen.proto.js"></script> 
<script src="bower_components/chosen/chosen.jquery.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 

<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-chosen-localytics/chosen.js"></script> 

自定義指令的響應：

return { 
     restrict: 'A', 
     replace: false, 
     transclude: false, 
     link: function(scope, element) { 
      element.chosen({ width: '100%' }); 
     } 
    }; 

模塊：

var module = this.module('MyModule', ['ngRoute', 'localytics.directives']); 

和元素：

<select class="form-control" chosen multiple responsive-chosen data-placeholder="Select items" ng-model="selectedItems" ng-options="item.Name for item in allItems"> 
     <option value=""></option> 
</select>