转换角度材料md-select中断选项

时间:2017-05-10 19:47:34

标签: javascript angularjs angular-material directive

我制作了一个指令,根据用户添加内容的次数,将内容转换为未知次数。

<loop>
    <md-content layout="column" layout-padding>
      <h2>Row</h2>
        <md-input-container flex class="md-block">
          <label>Input</label>
          <input ng-model="item.input">
        </md-input-container>
        <md-input-container flex class="md-block">
          <label>Select</label>
            <md-select ng-model="item.select">
                <md-option ng-repeat="option in options">{{option}}</md-option>
            </md-select>
        </md-input-container>
    </md-content>
</loop>

我希望loop指令中的所有内容都附加在ng-repeat中。我的指令的模板包含一个占位符,所以我可以在自定义转换函数

中编译之前替换内容
  <div ng-repeat="item in items">
      <placeholder></placeholder>
  </div>
  <button ng-click="addItem()">Add item</button>

我使用自定义转码功能,没有ngTransclude指令,因为我不想在已转换内容中包含隔离范围,因此我可以更新我的模型。

$templateRequest('template.html').then(function(html) {
                        var template = angular.element(html);

                        transclude(scope, function(row) {
                            template.find('placeholder').replaceWith(row);

                            $compile(template)(scope, function(clonedTemplate){
                                element.append(clonedTemplate);
                            });
                        });
                    });

首先,我转换并使用transcluded clone替换模板中的占位符,然后编译我的模板。当我编译md-select中断时。我想因为它已经在转换后编译了。我无法在编译后替换占位符,因为ng-repeat已经编译,没有找到占位符。

See this plnkr for an example。我尽可能地简化了代码。

是否有其他方法可以实现此结果,或者是否有一些我可以更改的内容,因此md-select不会中断。该示例使用md-select,但也有其他自定义指令不起作用。我认为这也是同样的原因。

0 个答案:

没有答案