ng-select 选项在与自定义指令一起使用时加倍

Question

我正在尝试实现可动态配置的字段。我将从服务器获取验证规则 ng-required、ng-hidden、ng-disabled 等属性 json 并通过指令动态设置它们。

我有以下指令代码。它显示 select 值加倍 JsBin link 是 http://jsbin.com/jiququtibo/1/edit

var app = angular.module('myapp', []);
app.directive('inputConfig', function( $compile) {
  return {
        require: 'ngModel',
        restrict: 'A',
        scope: '=',
        compile: function(tElem, tAttrs){
            console.log("compile 2");
            tElem.removeAttr('data-input-config');
            tElem.removeAttr('input-config');
            tElem.attr('ng-required',true);
            return {
                pre: function (scope, iElement, iAttrs){
                    console.log('pre');
                },
                post: function(scope, iElement, iAttrs){
                    console.log("post");
                    $compile(tElem)(scope);

                }
            }
        }
    };
});

我该如何解决这个问题？我应该能够动态添加指令。

Answer 1

要解决您的问题，您需要从 post 函数中删除以下行：

$compile(tElem)(scope);

我不清楚你为什么要在这里编译，所以我不确定这是否会产生任何意想不到的副作用。

Answer 2

我发现以下代码的解决方案是 working.You 应该首先克隆、删除指令、准备 dom 和编译

    app.directive('inputConfig', function( $compile) {
        return {
            require: '?ngModel',
            restrict: 'A',
            compile:function (t, tAttrs, transclude){
                var tElement = t.clone()  ;
                tElement.removeAttr('input-config');
                tElement.attr('ng-required',true);
                t.attr('ng-required',true);
                return function(scope){
                    // first prepare dom 
                    t.replaceWith(tElement);
                    // than compile
                    $compile(tElement)(scope);
                };
            }
        }
    });

ng-select 选项在与自定义指令一起使用时加倍

ng-select options are doubled when used with a custom directive

javascript

angularjs

angularjs-directive