javascript - 从 Controller 外部强制刷新范围

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 data-ng-model="selectedOption" data-select-menu>

更新了 fiddle : http://jsfiddle.net/t4deu/n6ckujj2/

这对于基本的 AngularJS 应用程序来说效果很好。但更好的是避免使用 jquery 并坚持使用 Angular 指令和模块。