Javascript 如何使用$interpolate函数从JSON添加动态指令名

我试图从json对象动态地将指令名称添加到指令中。然而，Angular只插入一次从JSON树中提取的指令名，Angular则不会在插入名称后识别和编译动态子指令

我已经尝试将插值服务添加到DDO中，以便手动插值JSON值，然后进行角度编译

但是，

$interpolate（tAttrs.$attr.layout）

我将json对象作为布局传递到我的隔离范围，当我尝试访问attr布局时，我得到了未定义。我的问题是如何在预链接或编译之前访问布局对象值，以便插入值并将其插入

或者我是否需要按此处所述进行角度重新编译：

任何帮助都会很好

{
  "containers": [
  {
    "fluid": true,
    "rows": [
    {
      "columns": [
        {
          "class": "col-md-12",
          "directive": "blog"
        }
      ]
    },
    {
      "columns": [
        {
          "class": "col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1",
          "directive": "tire-finder"
        }
      ]
    }
  ]
 }
]
}

---

如果你只是在讨论专栏可能是什么的几个选项，我建议使用@georgeawg的答案

然而，如果你预计这个数字会增长，你可能会选择以下几点：

<div layout="layout" ng-repeat="container in layout.containers" ng-class="container">
  <div ng-repeat="row in container.rows">
  <div ng-repeat="column in row.columns" ng-class="column.class">
    <column-directive type="column.directive"></column-directive>
  </div>
</div>

然后在你的JS中

yourApp.directive('columnDirective', columnDirectiveFactory);

columnDirectiveFactory.$inject = ['$compile'];
function columnDirectiveFactory ($compile) {
  return {
    restrict: 'E',
    scope: {
      type: '='
    },
    link: function (scope, elem, attrs) {
      var newContents = $compile('<' + scope.type + '></' + scope.type + '>')(scope);
      elem.contents(newContents);
    }
  };
}

yourApp.directive（'columnDirective'，columnDirectiveFactory）；
columnDirectiveFactory.$inject=['$compile']；
函数columnDirectiveFactory（$compile）{
返回{
限制：'E'，
范围：{
类型：'='
},
链接：功能（范围、要素、属性）{
var newContents=$compile（“”）（范围）；
要素目录（新目录）；
}
};
}

---

据我所知，Angular没有任何内置的工具来以真正动态的方式选择指令。上述解决方案允许您将有关所需指令的信息传递到通用的

列指令

，其链接功能用于构造正确的元素，根据当前范围编译元素，并插入到DOM中。

我最初发布的代码中的承诺有一个问题，它阻止我用正确的指令名重新编译模板。问题是我试图在preLink函数中访问JSON对象，但承诺尚未得到解决。这意味着我的scope属性还没有数据

为了解决这个问题，我将我的服务承诺添加到指令scope

$scope.layoutPromise=brainService.getDirectiveScope（'wpMain'，{}）。我设法让Angular从JSON对象编译我所有的指令名，但我不得不用一种非常黑客的方式。我将采纳您的建议@cmw，以使我的代码更简单、更“角度化”

这是我当前的工作代码：


angular.module（'rpmsol'）.directive（'wpMain'，wpMainDirective）；
函数wpMainDirective（$interpolate，$compile）{
var控制器=功能（brainService、$scope、$state）{
$scope.currentState=$state.current.name；
$scope.layoutPromise=brainService.getDirectiveScope（'wpMain'，{}）；
};
var link=函数（范围、元素、属性）{
scope.layoutPromise.then（函数成功（响应）{
var模板=[]；
angular.forEach（response.states[scope.currentState]。容器，函数（容器，容器键）{
模板推送（“”）；
//循环行
angular.forEach（container.rows，function（row，rowkey）{
模板推送（“”）；
angular.forEach（row.columns，function（column，columnKey）{
模板推送（“”）；
模板推送（“”）
模板推送（“”）；
});
模板推送（“”）；
});
模板推送（“”）；
});
template=template.join（“”）；
追加（$compile（template）（scope））；
})
};
返回{
范围：正确，
控制器：控制器，
链接：链接
};
};
$scope.layout=response.states[currentState]；等于显示的JSON对象。
elem.contents（newContents）
应为
elem.replaceWith（newContents）
谢谢您的回答。我希望我的指令基于JSON数据增长。其想法是制作一个数据驱动的应用程序，为多个客户创建网站。想想看，卡利普索是用棱角建成的。我会试试你的推荐
<div layout="layout" ng-repeat="container in layout.containers" ng-class="container">
  <div ng-repeat="row in container.rows">
  <div ng-repeat="column in row.columns" ng-class="column.class">
    <column-directive type="column.directive"></column-directive>
  </div>
</div>

yourApp.directive('columnDirective', columnDirectiveFactory);

columnDirectiveFactory.$inject = ['$compile'];
function columnDirectiveFactory ($compile) {
  return {
    restrict: 'E',
    scope: {
      type: '='
    },
    link: function (scope, elem, attrs) {
      var newContents = $compile('<' + scope.type + '></' + scope.type + '>')(scope);
      elem.contents(newContents);
    }
  };
}

    angular.module('rpmsol').directive('wpMain', wpMainDirective);

function wpMainDirective($interpolate, $compile) {

    var controller =  function(brainService, $scope, $state) {
        $scope.currentState = $state.current.name;
        $scope.layoutPromise = brainService.getDirectiveScope('wpMain', {});
    };

    var link = function(scope, element, attributes) {
        scope.layoutPromise.then(function sucess(response) {
            var template = [];
            angular.forEach(response.states[scope.currentState].containers, function(container, containerKey) {
                template.push('<div class="container' + (container.fluid?'-fluid':'') + '">');
                //loop rows
                angular.forEach(container.rows, function(row, rowkey) {
                    template.push('<div class="row">');
                        angular.forEach(row.columns, function(column, columnKey) {
                            template.push('<div class="' + column.class + '">');
                            template.push('<' + column.directive +'></' + column.directive + '>')
                            template.push('</div>');
                        });
                    template.push('</div>');
                });
                template.push('</div>');
            });
            template = template.join('');
            element.append($compile(template)(scope));
        })
    };

    return {
        scope: true,
        controller: controller,
        link: link
    };
};