指令以＆lt;选择NG-选项＆gt;和间接 [英] Directive with <select ng-options> and indirection

问题描述

我有一个页面上的几个多选择，每一个比特的逻辑，填补从服务器多选，我想包每一个成一个指令。

I have several multi-selects on a page, each with a bit of logic that fills that multi-select from the server, and I want to wrap each one up into a Directive.

试图总结到这些指令之前，我每建这样：

Before trying to wrap these into Directives, I built each as such:

的index.html

<select name="groups" ng-model="inputs.groups" ng-change="groupsChanged()" ng-options="g for g in allgroups" multiple></select>

controllers.js

在第一遍，我从这里我的$ HTTP调用。是的，我知道，不是最佳做法，但我想证明这首作品我自己。

In the first pass, I do my $http calls from here. Yes, I know, not best practices, but I wanted to prove that this works to myself first.

  $scope.loadSelect = function(_url) {
    $http({
      url: _url,
      method: 'POST',
      data: $scope.inputs,
      model: 'all' + _url
    }).success(function(data, status, headers, config) {
      $scope[config.model] = data;
    });
  };

  // Fill groups
  $scope.loadSelect('groups');

  // When groups change, reload other select fields that depend on groups
  $scope.groupsChanged = function() {
    $scope.loadSelect('categories');
    $scope.loadSelect('actions');
  }

现在我想把这个迁移到一个指令。我看到两个主要挑战：
1）我如何封装整组选项（例如，什么是现在的allgroups模式）插入指令？
2）基于最初的实验中，我试图物理构建＆LT;选择/＆GT; 到模板，但意识到，我必须操作DOM物理更换名称，NG-模型，和NG-选项。这导致我的编译属性，但一），感觉错了，B）设置＆LT;选择NG选项=X对于x在allgroups/＆GT; 它被插入到DOM之后实际上不重复。使用编译感觉不对;什么是处理这个正确的方式？

Now I want to migrate this to a Directive. I see two major challenges: 1.) How do I encapsulate the entire set of options (e.g. what is now the "allgroups" model) into the Directive? 2.) Based on initial experiments, I tried to physically build the <select/> into the template, but realized that I have to manipulate the DOM to physically replace name, ng-model, and ng-options. That lead me to the compile attribute, but a.) that feels wrong and b.) setting <select ng-options="x for x in allgroups" /> doesn't actually repeat after it's been inserted into the DOM. Using compile doesn't feel right; what's the right way to approach this?

下面是我在指令第一次尝试看起来是这样的。它并没有真正的工作，我想我会对此不正确的：

Here is my first attempt at the Directive looks like this. It doesn't really work, and I think I'm going about it incorrectly:

的index.html

<dimension ng-model="inputs.users" alloptions-model="allusers">Users</dimension>

directives.js

directive('dimension', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
      alloptionsModel: '='
    },
    template:
        '<div>' + 
          '<label ng-transclude></label>' +
          '<fieldset>' +
              '<div class="form-group">' +
                '<select ng-model="{{ngModel}}" ng-options="x for x in {{alloptionsModel}}" multiple class="form-control"></select>' +
              '</div>' +
           '</fieldset>' +
        '</div>',

    replace: true,
    transclude: true
  };
});

显然，我还没有算到了服务器负载的一部分，但我计划推出该到指令的控制器，在一个服务的实际$ HTTP调用。

Clearly I haven't even gotten to the server load part yet, but I plan to roll that into a controller in the Directive, with the actual $http call in a service.

我觉得我向下移动了错误的轨道。如果您有关于如何重新调整建议，请大家帮忙！

I feel like I'm moving down the wrong track. If you have suggestions on how to realign, please help!

推荐答案

与指令的主要问题是，你不能用绑定的小胡子在 ngModel 和 ngOptions 指令，因为他们是直接评估。您可以直接绑定到作用域属性（ngModel和alloptionsModel）：

The main problem with your directive is that you can't use mustache binding in ngModel and ngOptions directive because they are evaluated directly. You can directly bind to the scoped property (ngModel and alloptionsModel):

directive('dimension', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
      alloptionsModel: '='
    },
    template:
        '<div>' + 
          '<label ng-transclude></label>' +
          '<fieldset>' +
              '<div class="form-group">' +
                '<select ng-model="ngModel" ng-options="x for x in alloptionsModel" multiple class="form-control"></select>' +
              '</div>' +
           '</fieldset>' +
        '</div>',
    replace: true,
    transclude: true
  };
});

请参阅的工作示例此plunkr 。

修改
至于编译路线，没有什么不妥的地方。当你需要动态地创建一个模板，显然是你的情况时，你会得到它是非常有用的选择的项目模板。

compile: function(tElement, tAttrs) {
  var select = tElement.find('select'),
      value = tAttrs.value ? 'x.' + tAttrs.value : 'x',
      label = tAttrs.label ? 'x.' + tAttrs.label : 'x',
      ngOptions = value + ' as ' + label + ' for x in alloptionsModel';

      select.attr('ng-options', ngOptions);
}

// In the HTML file
<dimension ng-model="inputs.users" 
           alloptions-model="allusers"
           label="name">
  Users
</dimension>

我已经更新了 plunkr 的编译功能。

这篇关于指令以＆lt;选择NG-选项＆gt;和间接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！