无法让 angular-bootstrap-select 工作？

Question

因为我想要 <select> 在我的 angular 网站上看起来很性感，所以我正在努力 Angular-Bootstrap-Select 工作。该演示看起来相当简单，但我就是无法在我自己的代码中使用它。

我导入所有依赖项没有问题（jQuery、Bootstrap-select、Angular 等）和 Bootstrap-select 在 Angular.

之外工作得很好

我使用 bower 安装了 angular-bootstrap-select，在 head 中成功导入并注入到我的 angular 应用程序中：

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, but in my own code it still won't to work. My own test is here: http://185.53.129.139:5000/property-admin#/new这真的让我发疯，所以任何帮助我解决这个问题的人都会让我开心！

Answer 1

这是我用 bootstrap-select 和 angular 制作的一个小插件。 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 工作？

Can't get angular-bootstrap-select to work?

javascript

angularjs

twitter-bootstrap

drop-down-menu

bootstrap-select