Question

我有一个指令，将新选项添加到选择中。

为此我使用：

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

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

您不需要这样做。更新const appRoutes: Routes = [ { path: '', redirectTo: '/germany/ge/home', pathMatch: 'full' }, { path: ':userCountry/:userLanguage/home', component: HomeComponent } ... }和model由data binding cicle完成。

digest表示当您在视图中更改内容时，范围模型会自动更新。

您只需要更新范围，而Data binding cicle正在处理剩余的工作。

我建议您不要将digest与jquery混合。

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

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

但，您可以通过传递JQuery函数manually方法$scope.$apply()来执行此操作。

HTML

callback

JS

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

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

Updated Demo Codepen

[编辑1]

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

完全没有。在我们创建实例后立即调用compile。这是Angularjs编译指令

的阶段

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

Simple Example Fiddle

$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 Select value (read from DOM) is validated

最好以标准方式使用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)

Angular - 添加选项以使用Jquery

4 个答案: