angularjs 监视 jquery 指令值

Question

$scope.$watch 有点麻烦。情况是我正在使用这个不错的插件来创建一个下拉列表： http://wenzhixin.net.cn/p/multiple-select/docs/

在我的视图文件中，我有：

<select id="hid" multiple="multiple" name="hname">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

在我的 js 控制器文件中：

$('#hid').change(function() { $scope.hvalue = $(this).val() }).multipleSelect({ width: '20%', selectAll:false })

$scope.testwatch = []
$scope.$watch(function() {
    return $scope.hvalue
  }, function(value) {
      if(value) {
        $scope.testwatch = $scope.hvalue
      }
     }, true)

问题是当用户改变下拉菜单时，$scope.hvalue 被修改了。但是，$watch 函数永远不会执行。知道为什么会这样吗？

非常感谢！

Answer 1

如果我冒险，我想我会说，您的 jquery 更改函数不在角度摘要循环中。

要实现您的功能，我建议在您的选择标签上使用 ng-model 并像这样监视该 ng-model：

HTML：

<select id="hid" multiple="multiple" name="hname" ng-model="obj.hvalue">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

控制器：

$scope.obj = {};
$scope.obj.hvalue = '';
$scope.$watch('obj.hvalue', function(newval, oldval) {
    console.log(newval);
})