javascript - Angular - 添加选项以使用 Jquery 进行选择

Question

我有一个向选择添加新选项的指令。

为此，我正在使用:

let opt: any = angular.element(
            '<option value="' + opcion.valor + '">' + opcion.texto + '</option>'
          );
          this.element.append(this.$compile(opt)(scope));

我不想使用模板，因为我不想要新的范围。

选项被添加到 View 的列表中。但是当我选择其中一些时，选择的 ng-model 不会更新。它获得值 null。

如何使用新的选项值使 Angular 刷新？

这是一个代码笔示例: 选择选项 X 不会反射(reflect)在模型上。

奇怪的是，如果我链接到 angular 1.5.9，它可以工作，但从 angular 1.6.0 开始就不行。

https://codepen.io/anon/pen/XemqGb?editors=0010

Answer 1

How can i make angular to refresh with the new option values ?

您不需要这样做。更新 model 和 data binding 由 digest cicle 完成。

数据绑定(bind) 意味着当您更改 View 中的内容时，scope 模型自动更新。

您只需更新您的scope，digest cicle 会处理其余的工作。

我建议您不要将 jquery 与 angularJS 混合使用。

尽管可能，您绝对应该尝试以 Angular 的方式做事。

你不应该在 AngularJS 之上使用 jQuery，因为 AngularJS digest 循环不会如果我们使用 JQuery 进行任何 Angular DOM 操作或范围变量操作，则会运行。

但是，您可以使用 $scope.$apply() 方法通过传递一个回调来手动执行此操作> 功能。

HTML

<select ng-model="selectedValue">
  ....
</select>

JS

$('select').change(function(){
    var value = $(this).val();
    var selectScope = angular.element($("select")).scope();
    selectScope.$apply(function(){
        selectScope.selectedValue=value;
    });
});