javascript - 将所选内容集成到 AngularJS 中

Question

我正在尝试将 Chosen(jquery 插件)与 AngularJS 集成，但我无法让它填充选择中的任何选项。

我开始学习本教程:

http://onehungrymind.com/angularjs-chosen-plugin-awesome/

并创建了这个简单的示例(在“Chosen Angular directive doesn't get updated”的帮助下):

http://plnkr.co/edit/BzLAdotxKVI15t5phNAA?p=preview

module.directive('chosen', function(){

var directive = {};

    directive.restrict = 'A';


    directive.link = function(scope, element, attrs) {

        var list = attrs['chosen'];

        scope.$watch(list, function () {
            element.trigger('chosen:updated');
        });

        scope.$watch(attrs['ngModel'], function() {
            element.trigger('chosen:updated');
        });

        element.chosen();
    };

    return directive;
});

不会出错，但不会向列表中添加任何内容。如果我从选择中删除“chosen”属性，它会按预期工作，所以我知道这不是绑定(bind)问题。

然后我尝试使用 Angular 选择的包装器:

https://github.com/localytics/angular-chosen(在这个问题中引用 - Angular.js Chosen integration 和(可能)AngularJS Chosen not working/updating )

并创建了这个: http://plnkr.co/edit/NmQiDgU1xOK8l9MtTcjS?p=preview

有同样的问题。

更新响应 Jose M - 我查看了 ui-select 但它需要大量(不直观)标记而不仅仅是一个属性，所以我排除了它。

更新回应 **jd17* - * 从下面的答案中工作 plunkr: http://plnkr.co/edit/2v3BWVL0xFgQVce0MPXR?p=preview

Answer 1

在你的 app.js 中，既然你使用的是 Angular Chosen 插件，为什么要重新定义“chosen”指令？
我在你的第二个 plnkr 中修改了你的 app.js，如下所示，一切正常。

var app = angular.module('myApp',['localytics.directives']); // inject the chosen

app.controller('TestController', ['$scope','$http',
function TestController($scope,$http){

  $scope.url = 'testValues.json';
  $scope.wordList = [];
  $scope.selectedWord = {};

  $scope.loadWords = function(){
    $http.get($scope.url).then(function(result){
      $scope.wordList = result.data;
    });
  };

  $scope.loadWords();
}
]);