2

http://plnkr.co/edit/1ATuPILnevk6gCvYRvee?p=preview

angular.module('emfModule')
  .directive('selectpicker', function ($timeout) {
      return {
          restrict: 'C',
          link: function (scope, element, attrs) {

              var $el = $(element);
              $timeout(function () {

                  $el.selectpicker({
                      style: 'btn-default',
                      size: false
                  });


              });


          }
      };
  });

こんにちは、角度のあるアプリのドロップダウンに ajax 経由でデータをロードしようとしています。データが送信され、コントロールに入力できますが、bootstrap-select プラグインを使用しようとすると失敗します。angularディレクティブを使用してラップしようとしましたが、役に立ちませんでした。上記の Plunk は、私の使用例を説明しています。誰かが私がどこで間違っているのか教えてもらえますか? ありがとうございました

4

1 に答える 1

2

http://plnkr.co/edit/7YR5R4aTFWDelwFDz7jV?p=preview

selectpicker ディレクティブを変更しました。オプションのデータが読み込まれるまで待機し、選択を再構築できるように角度がもう少し長くなります。その後、select-bootstrap プラグインを呼び出します。また、ディレクティブの制限が C から A に変更されました。

angular.module('emfModule')
.directive('selectpicker', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      var $el = $(element);

      var unsubscribe = scope.$watch(attrs.selectpickerOptions, function(opts) {
        if (opts) {
          $timeout(function() {
            $el.selectpicker({
              style: 'btn-default',
              size: false
            });
            unsubscribe();
          });
        }
      })

    }
  };
});

そして、ここにあなたの要素があります。select-bootstrap を自分で呼び出したくないので、クラス selectpicker を削除しました。

<select title="Select" ng-options="c.login  for c in Users" ng-model="login" name="login" selectpicker="" selectpicker-options="Users" class="form-control input-sm">
   <option value="">-- choose user --</option>
</select>

于 2015-01-14T22:22:28.493 に答える