如何使用带角度的jQuery Select2

Ale*_*lex 5 jquery angularjs jquery-select2 angularjs-select2

我正在尝试使用带有Angularjs(1.5)的jQuery(2.2.1)Select2(3.5.2),但是很难从选择框中获取数据.我已经尝试了ui-select,我可以检索数据......但是在搜索时经常会崩溃浏览器,速度非常慢且整体不稳定(5000-10000项).即使有大量的条目,jQuery Select2也是快速且响应迅速的,但是当我选择一个选项时,我似乎无法获得该对象.

<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/CustomScripts/app.js"></script>
    <script src="~/Scripts/jquery-2.2.1.js"></script>
    <script src="~/Scripts/select2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".sel").select2();
        });
    </script>
<head>
<body ng-app="app" ng-controller="MainCtrl">
    <select class="sel" data-ng-model="country.selected" ng-options="country.Name for country in countries | orderBy: 'Name'">
<body>
Run Code Online (Sandbox Code Playgroud)

app.js

var app = angular.module('app', []);

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

    $scope.country = {};

    $scope.countries = [{
        name: 'Australia',
    }, {
        name: 'United States'
    }, {
        name: 'United Kingdom'
    }];

}]);
Run Code Online (Sandbox Code Playgroud)

有没有办法让这两个很好地工作?

Ale*_*lex 2

在搜索如何从 jQuery 访问 $scope 函数之后,我发现使用 angular.element.scope().function(x) 可以让我在“change”事件上将每个 select2 元素的键传递到 Angular 中,然后可以对其进行操纵。

<script type="text/javascript">
    $(document).ready(function () {
        $(".sel").select2({
            placeholder: "Select a project..."
        })
        .on("change", function (e) { angular.element(document.getElementById("MainCtrl")).scope().testfunction(); });
    });
</script>
Run Code Online (Sandbox Code Playgroud)