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

顺便说一下，你可以在angular ..中使用jquery事件。

Answer 3

理想情况下，在angularJS中，控制器不应直接更新DOM引用。如果你想实现同样的目的，你应该在$ scope上公开一个方法并使用＆＃34; ng-click＆＃34;指示。

如果你想使用jQuery实现相同的功能，它应该以

的形式进入指令

$scope.$apply()

更新范围。

Answer 4

最好不要将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中尝试了上述操作，但它确实有效。

Answer 5

在你的jQuery中添加自动触发器，例如

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

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

5 个答案: