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

Question

我有一个指令，为select添加新选项 。

为此我正在使用：

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

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

选项将添加到视图的列表中。 但是当我选择其中一些时，选择的ng模型不会更新。 它的值为null 。

如何使用新选项值进行角度刷新？

这是一个codepen示例：选择选项X不会反映在模型上。

奇怪的是，如果我链接到角1.5.9，它的工作原理，但从角1.6.0开始它没有。

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

Answer 1

如何使用新选项值进行角度刷新？

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

Data binding意味着当您在视图中更改某些内容时， 范围模型会自动更新。

你只需要更新你的范围和digest cicle正在处理其余的工作。

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

你一定要尝试做事情的angular时，虽然可能方式。

你不应该在AngularJS的顶部使用jQuery ，因为如果我们使用JQuery进行任何角度DOM操作或范围变量操作， AngularJS digest周期将不会运行。

但是 ，您可以通过传递callback函数使用$scope.$apply()方法manually执行此manually 。

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

Answer 2

我想为select添加新选项，但不使用指令的新模板

在指令中使用compile属性：

myApp.directive('myList', function() {
   return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
         link: function ($scope, element, attrs) {
             // ....
        }, //DOM manipulation
         compile: function(tElement, tAttrs) {
           tElement.append('<option value="10">Option Ten</option>');
        }
      }
  });

更新了演示Codepen

---

[编辑1]

在外部模型字段更改后可以执行此操作吗？ 观看一个字段，然后添加选项？

一点也不。 在我们创建实例后立即调用compile 。 这是Angularjs编译指令的阶段

但是，如果您想在基于外部流量的延迟后创建值，为什么不使用ng-options - 您只需要向对象列表添加新值， ng-options将为您完成工作：

简单示例小提琴

$scope.items = [
    { value: "C", name: "Process C" },
    { value: "Q", name: "Process Q" }
];
 $timeout(function(){
    $scope.items.push({ value: "New", name: "Process New" });
 },3000);

和HTML：

<select class="form-control" name="theModel" ng-model="theModel" 
        ng-options="c.value as c.name for c in items">
    <option value=""> -- </option>
  </select>

Answer 3

在最新的angularJS 选择值（从DOM读取）中进行验证

最好以标准方式使用select，

顺便说一句 - 如果你确实需要这个，请通过如下装饰selectDirective来删除验证

Codepen： https ：//codepen.io/anon/pen/NapVwN ? editors = 1010#anon-login

myApp.decorator('selectDirective', function($delegate) {
    let originalCtrl = $delegate[0].controller.pop();
    $delegate[0].controller.push(function() {
      originalCtrl.apply(this, arguments);
      this.hasOption = function() { 
        return true; 
      }
    })
    return $delegate;
});

Answer 4

实际上，你无法理解的是数据绑定。 这意味着当你在$ scope中有东西时，你必须使用它。 所以你的变量$ scope.opcion必须是一个数组，因为它是一个选择。 代码必须是这样的：

/*
AngularJS Basic Directives

For More Examples AngularJS  

http://mehmetcanker.com

*/

var myApp = angular.module('example', []);

myApp.controller('MyCtrl',['$scope', function($scope) {
$scope.opcion = [1];
}])

 //This directive doesn't individual scope so
 //Controller and Directive share same scope
 myApp.directive('myList', function() {
   return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
        link: function ($scope, element, attrs) {
          // add options
          $scope.opcion.join(2);
        } //DOM manipulation
    }
  });

重要的部分是$scope.opcion = [1]和$scope.opcion.join(value)