Question

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

我有以下指令代码。它显示选择值加倍JsBin链接为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

要解决您的问题，您需要从帖子功能中删除以下行：

$compile(tElem)(scope);

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

Answer 2

我发现代码正在运行的解决方案。你应该首先克隆，删除指令，准备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选项加倍

2 个答案: