Bootstrap-select, не работает выпадающий список angularjs

У меня есть эта проблема и надеюсь получить несколько советов о том, как ее исправить.

Я переместил часть моей 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>

Заранее спасибо.

Источник

2 ответа

Решение

Смешивание Angular + jQuery не очень хорошая практика. Если вы хотите использовать любой плагин jQuery, вы можете обернуть его в пользовательскую угловую директиву ( официальные документы).

Смотрите рабочий пример директивы selectpicker в этом jsFiddle.

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-й параметр для связи функции ( см. документ здесь).

Таким образом, вы можете легко связать значения вашего контроллера с областью действия директивы.

Смотрите другие jsFiddle здесь.

Директива:

angular.module('demo')
  .directive('selectpicker', function () {
    return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, 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:

 Вы выбрали: {{ 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>

Передача параметров в параметре

Смотрите 3-й jsFiddle.

Чтобы передать параметры динамически, просто обновите вашу директиву:

angular.module('demo')
  .directive('selectpicker', function ($timeout) {
    return {
      restrict: 'C',
      require: 'ngModel',
      replace: true,
        template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',
      scope: {
        options: '='
      },
      link: function (scope, element, attrs, ngModel) {
        var $el = $(element);
        $timeout(function () {
          $el.selectpicker({
            style: 'btn-default',
            size: false
          });
        });
        $el.on('change', function (ee, aa) {
          ngModel.$setViewValue($el.val());
          scope.$apply();
        });
      }
    };
  });

Тогда в вашем HTML:

<div ng-model="selected"
        class="selectpicker"
        options="issues"
        title='Choose one of the following...'>
</div>
Источник

Я получил другое решение проблемы, связанной.

Сначала я загрузил свои данные из серверной части с помощью angularjs и внутри .success после проверки я написал следующий код:

angular.element(document).ready(function () { 
  $('select').selectpicker("destroy"); 
  $('select').selectpicker("render"); 
});

Я пытался сделать это без angular.element(document).ready(function (){}) но ничего не случилось Я предполагаю, что методы плагина работают только внутри этой функции.

Источник
Другие вопросы по тегам