Angular-chosen-localytics 不工作
Anuglar-chosen-localytics not working
我正在尝试使用 Angular 和 Chosen 创建一个选择框。而且我似乎无法让它工作。我觉得我还在上传错误的脚本,但不知道如何上传正确的脚本。我已经使用 bower 安装了 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>
angular.module('myApp', ['localytics.directives'])
但后来我收到一条错误消息,说 elemnt.chosen 未定义。我读到当您在加载 angular 之后加载 jquery 时会发生这种情况。所以我尝试了:
<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>
但这不起作用,因为 angular 未定义。我发现我有两个独立的 Bower 组件,实际的 Chosen 组件和 angular-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>
编辑
对我来说这个命令有效:
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"/>
在此处找到选择-bootstrap.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>
我正在尝试使用 Angular 和 Chosen 创建一个选择框。而且我似乎无法让它工作。我觉得我还在上传错误的脚本,但不知道如何上传正确的脚本。我已经使用 bower 安装了 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>
angular.module('myApp', ['localytics.directives'])
但后来我收到一条错误消息,说 elemnt.chosen 未定义。我读到当您在加载 angular 之后加载 jquery 时会发生这种情况。所以我尝试了:
<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>
但这不起作用,因为 angular 未定义。我发现我有两个独立的 Bower 组件,实际的 Chosen 组件和 angular-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>
编辑
对我来说这个命令有效:
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"/>
在此处找到选择-bootstrap.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>