使用自定义指令时重新下载我的下拉列表

Question

我正在使用 bootstrap-multiselect插件来创建多选下拉菜单。

像这样：

我的下拉列表是这样构建的：

<select id="ms{{chore.id}}" multiple="multiple" applyplugin>
    <option ng-repeat="familyMember in myService.people" value={{familyMember.name}}>{{familyMember.name}}</option>
</select>

我有服务：

myapp.service('myService', function () {
    var familyList = this;
    familyList.people = [
        {name: 'Jax', dob: '01/01/1974', cell: '3035551212', carrier: 'ATT', email: 'jax@soa.com', active: true},
        {name: 'Tara', dob: '03/01/1974', cell: '3035551313', carrier: 'SPRINT', email: 'tara@soa.com', active: false}];
    familyList.addPerson = function () {
        //alert(familyList.inputName + ', ' + familyList.inputBirthday + ', ' + familyList.inputCellPhone, + ', ' + familyList.inputCarrier + ', ' + familyList.inputEmail);
        familyList.people.push({
            name: familyList.inputName, dob: familyList.inputBirthday,
            cell: familyList.inputCellPhone, carrier: familyList.inputCarrier,
            email: familyList.inputEmail, active: true
        });

        familyList.inputName = '';
        familyList.inputDOB = '';
        familyList.inputCellPhone = '';
        familyList.inputCarrier = 0;
        familyList.inputEmail = '';
        familyList.active = true;
    };
});

我正在研究一种效果不佳的自定义指令：

myapp.directive('applyplugin', function () {
    return {
        template: '<select id="ms{{chore.id}}" multiple="multiple"> <option ng-repeat="familyMember in myService.people" value={{familyMember.name}}>{{familyMember.name}}</option> </select>',
        link: function () {
        }
    }
});

我想弄清楚的问题是当我在familyList.people数组中添加一个新的族元素时，我可以看到它被添加到代码的另一部分，但是我的下拉菜单没有显示新元素。

我真的只想让我的下拉菜单显示新元素。你能看到为什么这不仅仅会在选项列表中添加新值吗？

如果我添加了一个新的家庭成员，然后我添加了一个新的家务项目，那么我会得到更新的列表框（但原始的杂项项目不会获得新添加的家庭成员）：

更新<！/强>

我更新了Fiddle，您可以看到家庭成员被添加到列表中。但是，当我应用我正在使用的插件（bootstrap-multiselect）时，它不会在插件处于活动状态时将新项添加到列表中。

有什么想法吗？

Answer 1

对于使用bootstrap和Angular的多个选择，我建议使用AngularJS ui-select https://github.com/angular-ui/ui-select而不是重新发明轮子。

请参阅 http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

  <ui-select multiple ng-model="multipleDemo.colors" theme="select2">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

这是包含更多UI元素的大型项目的一部分：http://angular-ui.github.io/