5

我有这个问题，希望得到一些关于如何解决它的建议。

我已将部分 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>

先感谢您。

4

2 回答 2

8

混合 Angular + jQuery 不是一个好习惯。如果你想使用任何 jQuery 插件，你可以将它包装成一个自定义的 angular 指令（官方文档）。

请参阅此中的 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提供链接功能的第四个参数（请参阅此处的文档）。

因此，您可以轻松地将控制器值与指令范围绑定。

见other 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：

您已选择：{{已选择 | json}}

<select ng-model="selected"
        class="selectpicker"
        multiple
        title='Choose one of the following...'>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

在参数中传递选项

见3rd 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>
于 2014-09-22T11:07:48.263 回答
2

我得到了另一个解决相关问题的方法。

我所做的是首先使用 angularjs 从后端加载我的数据，然后在.success验证后我编写了以下代码：

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

我试图在没有的情况下这样做，angular.element(document).ready(function (){})但什么也没发生。我想插件的方法只适用于该函数。

于 2017-11-19T06:36:02.727 回答