我有这个问题,希望得到一些如何解决它的建议.
我已将部分html页面移动到局部视图中并通过ng-view加载它
现在的问题是下拉选择不再起作用了,我设法恢复了样式但是当我点击它时,它没有打开.
当它不在局部视图中时,我甚至不需要进行现在似乎需要的javascript调用.
这是我的代码
index.html <link href="resources/css/bootstrap.min.css" rel="stylesheet"> <link href="resources/css/bootstrap-select.css" rel="stylesheet"> <!-- Bootstrap Core CSS --> <script src="resources/js/jquery-2.1.1.min.js"></script> <script src="resources/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap-select.js"></script> <script src="resources/library/angular.js"></script> <script src="resources/library/angular-route.js"></script> <script src="resources/js/MainController.js"></script> <script src="resources/js/main-app.js"></script> partialview.html ------------------- <select class="selectpicker" multiple ng-model="selE"> <option ng-repeat="e in ee">{{e}}</option> </select> <script> $(document).ready(function () { $('select').selectpicker({ style: 'btn-default',size: false }); }); </script>
先感谢您.
解决方法
混合Angular jQuery不是一个好习惯.如果要使用任何jQuery插件,可以将其包装到自定义角度指令(
official docs)中.
请参阅此jsFiddle中的selectpicker指令的工作示例.
HTML:
<select class="selectpicker" multiple title='Choose one of the following...'> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
js:
angular.module('demo') .directive('selectpicker',function () { return { restrict: 'C',link: function (scope,element) { $(element).selectpicker({ style: 'btn-default',size: false }); } }; });
链接到控制器
使用require:指令中的’ngModel’将为您提供ngModelController作为链接函数的第4个参数(see doc here).
因此,您可以轻松地将控制器值与指令范围绑定.
见这里other jsFiddle.
指令:
angular.module('demo') .directive('selectpicker',require: 'ngModel',element,attrs,ngModel) { var $el = $(element); $el.selectpicker({ style: 'btn-default',size: false }); $el.on('change',function (ee,aa) { ngModel.$setViewValue($el.val()); scope.$apply(); }); } }; });
控制器:
angular.module('demo') .controller('MainCtrl',function ($scope) { $scope.selected = []; });
HTML:
You have selected : {{ selected | json }}
<select ng-model="selected" class="selectpicker" multiple title='Choose one of the following...'> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
传递参数中的选项
要动态传递选项,只需更新您的指令:
angular.module('demo') .directive('selectpicker',function ($timeout) { return { restrict: 'C',replace: true,template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',scope: { options: '=' },ngModel) { var $el = $(element); $timeout(function () { $el.selectpicker({ style: 'btn-default',size: false }); }); $el.on('change',aa) { ngModel.$setViewValue($el.val()); scope.$apply(); }); } }; });
然后在你的HTML中:
<div ng-model="selected" class="selectpicker" options="issues" title='Choose one of the following...'> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。