angularjs:$ scope使用jQuery更改select时的更新

Question

我正在使用jQuery插件来"自定义"我的选择.

当选择某个选项时,此插件将触发原始选择的更改事件.

问题是我的范围没有改变.

在这里您可以看到一个快速示例...更改选择范围更改.单击按钮选择更改但不是范围.

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

我错过了什么？

Answer 1

您需要访问下拉列表的范围,然后应用它,如下所示:

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

Answer 2

当您单击该按钮时,angular超出其范围并使用jquery来操作数据/执行某些操作,因此我们需要显式调用$ scope.$ apply()以将更改反映回控制器的范围.并将您的控制器更改为:

app.controller('AppCtrl', function($scope) {
    $('button').on('click', function(){
        $scope.selectValue=$(this).data('val');
        $scope.$apply();
    });
}

顺便说一句,你可以在角度内使用jquery事件.

Answer 3

最好不要将 DOM 操作与 Angular 混合在一起。对您的按钮 HTML 尝试以下操作：

<button class="setVal" ng-click="selectValue=1">Set 1</button>
<button class="setVal" ng-click="selectValue=2">Set 2</button>
<button class="setVal" ng-click="selectValue=3">Set 3</button>

我在你的 Plunker 中尝试了上面的方法，它成功了。