Question

因为我想要在我有棱有角的网站中看起来性感<select>，我正试着让Angular-Bootstrap-Select工作。该演示似乎相当简单，但我无法让它在我自己的代码中工作。

我导入所有依赖项没有问题（jQuery，Bootstrap-select，Angular等），Bootstrap-select在Angular之外工作得很好。

我使用bower安装了angular-bootstrap-select，在头部成功导入并将其注入我的角度应用程序中：

var propertyApp = angular.module('propertyApp', [
    'propertyControllers',
    'ui.router',
    'angular-bootstrap-select'
]);

propertyApp.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state('new', {
                url: '/new',
                templateUrl: '/static/angular/property/partials/newProperty.html',
                controller: 'NewPropertyCtrl'
            });

        $urlRouterProvider.otherwise('/new')
    }
]);

我的控制器完全是空的：

var propertyControllers = angular.module('propertyControllers', []);
propertyControllers.controller('NewPropertyCtrl', [function(){
}]);

我的模板如下所示：

<div class="row">
    <div class="col-sm-12">
        Before selectpicker
        <select class="selectpicker">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>
        After selectpicker
    </div>
</div>

但我在浏览器中看到的唯一内容是：Before selectpicker After selectpicker。

我有working codepen here，但我无法弄清楚该示例和我自己的代码之间有什么不同。

有人看到或者知道我在这里做错了什么吗？欢迎所有提示！

[编辑]

我可以让它完美地运作in a codepen，但在我自己的代码中它仍然无法工作。我自己的测试就在这里：http://185.53.129.139:5000/property-admin#/new这真让我疯狂，所以任何帮我解决这个问题的人都会让我感到高兴！

Answer 1

这是一个我用自举选择和棱角分明的小掠夺者。 http://plnkr.co/edit/webnjq6kzLDnnkI9ZO6W

  angular.module('angular-bootstrap-select', [])
  .directive('selectpicker', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.selectpicker($parse(attrs.selectpicker)());
        element.selectpicker('refresh');

        scope.$watch(attrs.ngModel, function (newVal, oldVal) {
          scope.$parent[attrs.ngModel] = newVal;
          scope.$evalAsync(function () {
            if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
            element.selectpicker('refresh');
          });
        });

    scope.$on('$destroy', function () {
      scope.$evalAsync(function () {
        element.selectpicker('destroy');
      });
    });
  }
};
}]);

正如您所见，bootstrap-select包含在指令中。我认为这是最简单的方法。

此致埃里克

无法获得angular-bootstrap-select工作？

1 个答案: