Javascript 角度-添加使用Jquery选择的选项

我有一个指令，它向select添加了新选项

为此，我使用：

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

让opt:any=angular.element(
“+opcion.texto+”
);
this.element.append（this.$compile（opt）（scope））；

我不想使用模板，因为我不想要新的作用域

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

如何使用新的选项值进行刷新

下面是一个代码笔示例： 选择选项X不会反映在模型上

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

如何使用新的选项值进行刷新

你不需要这样做。更新

模型

和

数据绑定

由

摘要

cicle完成

数据绑定

意味着当您更改视图中的内容时，范围模型会自动更新

您只需更新您的范围，而

摘要

cicle正在处理其余的工作

我建议您不要将

jquery

与

angularJS

混用

当可能的时候，你一定要试着用

角度的
方式做事

您不应该在AngularJS顶部使用jQuery，因为如果我们使用
jQuery
执行任何角度DOM操作或范围变量操作，AngularJS
摘要
循环将不会运行

但是，您可以通过传递
回调
函数，使用
$scope.$apply（）
方法手动执行此操作

HTML

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

在指令中使用
编译
属性：

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

和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>


-- 
最新angularJS

最好以标准方式使用select

顺便说一句，如果您真的需要这个，可以通过如下方式装饰
selectDirective
来删除验证

代码笔：

实际上，您没有理解的是数据绑定。这意味着，当您拥有$scope中的某些内容时，您必须使用它。因此，变量$scope.opcion必须是一个数组，因为它是一个select。代码需要类似于：

/*
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）
我理解关于jquery的警告。这就是为什么我只在指令中使用它。我想向select添加新选项，但不使用指令的新模板。@MartinIrigaray，是的，您可以通过手动应用
$scope.$apply
方法来完成此操作。@MartinIrigaray，为了更新select的范围，我用一个可能的解决方案更新了我的答案。我在codepen上举了一个例子，angular 1.6.5不起作用。但需要注意的是，元素上的
scope（）
函数仅用于调试/测试目的，不用于实际代码。在外部模型字段发生更改后，是否可以这样做？观察一个字段，然后添加选项？@MartinIrigaray一点也不<代码>编译
在创建实例后立即调用一次。我认为这是对你发布的问题的正确回答。但是，如果您想在延迟后创造价值，为什么不使用
ng选项
？您只需向对象列表中添加新值，
ng选项将为您完成以下任务：
$scope.items = [
    { value: "C", name: "Process C" },
    { value: "Q", name: "Process Q" }
];
 $timeout(function(){
    $scope.items.push({ value: "New", name: "Process New" });
 },3000);

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

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

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