twitter-bootstrap - 如何在我的指令中连接我的控制器以插入数据并在 angular.js 中添加引导选择？

Question

我正在尝试使用控制器在我的选择菜单上添加数据并使用 ng-options，而我在指令中定义了一个类来将 bootstrap-select 插件插入到元素中。问题是我的控制器中的数据不起作用，它与我的指令有冲突，我什至尝试在我的指令中使用 require 和 controller 方法。

请看一下我的代码：

HTML

<div ng-controller="CitiesController" class="form-group pull-left form-register-width-field form-register-select">
   <label for="city">City</label>
   <select id="city" ng-model="selectedItem" ng-options="item as item.name for item in cities" class="selectpicker">
     <option>Select City</option>
  </select>
</div>  

我的控制器：

function CitiesController($scope) {
  console.log('cities controller'); 
  $scope.cities = [
    {value:'1',name:'Angeles'},
    {value:'2',name:'Angono'},
    {value:'3',name:'Antipolo'},
    {value:'4',name:'Apalit'},
    {value:'5',name:'Arayat'},
    {value:'6',name:'Bacolod'},
    {value:'7',name:'Bacoor'}
   ];
  console.log($scope.cities[2]);
 }

我的指令：

angular.module('myApp.directives', [])
.directive('selectpicker', function() {
   return {
     restrict: 'C',
     link: function(scope,el,attr,cntr) {
       $(el).selectpicker();
     }
   }
})

谢谢您的帮助 ：）

Answer 1

尝试像这样在指令本身中添加控制器；

angular.module('myApp.directives', [])
.directive('selectpicker', function() {
   return {
     restrict: 'C',
     controller: function($scope){
       $scope.cities = [
         {value:'1',name:'Angeles'},
         {value:'2',name:'Angono'},
         {value:'3',name:'Antipolo'},
         {value:'4',name:'Apalit'},
         {value:'5',name:'Arayat'},
         {value:'6',name:'Bacolod'},
         {value:'7',name:'Bacoor'}
       ];
     },
     link: function(scope,el,attr,cntr) {
       $(el).selectpicker();
     }
   }
});

Answer 2

Angular 表带为以下相同的“bsSelect”提供指令是 url：

http://mgcrea.github.io/angular-strap/#/select