Question

我有一个jQuery UI选择列表，我在一个非常基本的AngularJS应用程序中使用。打开列表并选择一个项目时，此更改不会通过Angular，因此应用程序不会响应更改。如果我删除它的jQuery UI方面并使其成为常规选择列表，那很好。我认为必须有一种方法让他们玩得很好，有谁知道怎么做？

示例：

HTML：

<div data-ng-app="appExample">
    <h1>Example 1</h1>
    <p>No jQuery UI</p>
    <div data-ng-controller="appCtrl1">
        <select id="exampleList1" data-ng-model="selectedOption">
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
        <span class="result">You selected Option {{ selectedOption }}</span>
    </div>
    <h1>Example 2</h1>
    <p>jQuery UI</p>
    <div data-ng-controller="appCtrl2">
        <select id="exampleList2" data-ng-model="selectedOption">
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
        <span class="result">You selected Option {{ selectedOption }}</span>
    </div>
</div>

JavaScript的：

appExample = angular.module('appExample', []);

appExample.controller('appCtrl1', function ($scope) {
    $scope.selectedOption = 0;
});

appExample.controller('appCtrl2', function ($scope) {
    $scope.selectedOption = 0;
});

$(function () {
    $("#exampleList2").selectmenu();
});

的jsfiddle：

http://jsfiddle.net/wtp1esyg/2/

Answer 1

您可以添加一个简单的指令作为jquery插件的包装器，如下所示：

appExample.directive('selectMenu', function() {
    return {
        restrict: 'A',
        require: 'ngModel',// require ngModel controller
        link: function(scope, element, attrs, ngModelCtrl) {
            $(element).selectmenu({
                //update ngModel on menu change event
                change: function( event, ui ) {
                    scope.$apply(function() {
                      ngModelCtrl.$setViewValue(element.val());
                    });
                }
            });
        }
    };
});

然后更新select元素：

<select data-ng-model="selectedOption" data-select-menu>

更新小提琴： http://jsfiddle.net/t4deu/n6ckujj2/

这适用于基本的AngularJS应用程序。但更好的方法是避免使用jquery并坚持使用angular指令和模块。

Answer 2

你的问题是jquery插件实际上根本没有使用select - 它使它不可见，然后创建一系列表示它的div和spans，然后将事件绑定到它。

这是一种非常jQuery的做事方式，但与angular完全脱节。

我的建议是完全改变你的方法 - 而不是使用jQuery组件，使用angular 指令。有一些库（例如angular-ui）已将大部分jquery-ui功能移植到原生角度，因此不要重新发明轮子。

强制从控制器外部刷新范围

2 个答案: