无法让 angular-bootstrap-select 工作？

Question

因为我想在我的 Angular 网站中看到性感的 <select>，所以我试图让 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，但在我自己的代码中它仍然无法工作。我自己的测试在这里：http://185.53.129.139:5000/property-admin#/new 这真的让我发疯，所以任何帮助我解决这个问题的人都会让我很开心！

Answer 1

这是我用 bootstrap-select 和 angular 制作的一个小 plunker。 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 包含在一个指令中。我认为这是最简单的方法。

问候， 埃里克