angularjs - angularjs：当我使用 jQuery 更改选择时 $scope 更新

Question

我正在使用 jQuery 插件来“自定义”我的选择。

This plugin fires the change event of the original select when some option is selected.

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

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

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();
    });
}

顺便说一句，您可以在 angular 中使用 jquery 事件。

Answer 3

理想情况下，在 angularJS 中，控制器不应该直接更新 DOM 引用。如果你想达到同样的效果，你应该在 $scope 上公开一种方法并使用“ng-click”指令。

如果您想使用 jQuery 实现相同的功能，它应该进入指令为

$scope.$apply()

更新范围。

Answer 4

在您的 jQuery 中放置自动触发器，例如

 $('#input').click(function(){
      $('#input').val('1');
      $('#input').trigger('input'); //add this line this will bind $scope Variable
    });

Answer 5

最好不要将 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 中尝试了上述方法，它奏效了。