从动态插入的标签编译指令

Question

我想创建一个包含几个较小“应用程序”的仪表板。我有以下标记（简化）：

<div id="rowcontainer">
  <div ng-repeat="appRow in dashboard.appRows">
    <div class="row">
      <div ng-repeat="app in appRow.apps">
        {{app}}
      </div>
    </div>
  </div>
</div>

dashboard.appRows 保留由我的“应用程序”(appRow.apps) 组成的行。 当我单击一个按钮时，我想通过将 {{app}} 占位符替换为指令标签来动态添加指令，然后编译 ($compile) 我刚刚插入的这个标签。 关键是，在点击处理程序中，当我更新我的模型时，函数中的 DOM 没有更新（显然），$() 将无法找到 DOM 节点。

澄清：

我想做这个：

<div ng-repeat="app in appRow.apps">
  {{app}}
</div>

变成这样：

<div ng-repeat="app in appRow.apps">
  <my-directive></my-directive>
</div>

最后是$compile上面的这个：

<div ng-repeat="app in appRow.apps">
  <my-directive>CONTENTS OF MY TEMPLATE</my-directive>
</div>

在同一个函数中尝试这一切是行不通的，调用$scope.$apply() 会抛出一个错误（$digest 已经在运行）而且我不知道是否有回调。并且查找 DOM 元素不起作用。感谢您的帮助或替代建议。

进一步说明：

指令<my-directive> 可以是任何指令（<my-directive>、<your-directive>、...）。在我的模板中有一个占位符{{app}}，我将在运行时将其替换为提到的任何这些指令（假设您单击一个按钮并且该指令正在替换{{app}}）。然后我希望我的指令起作用。

Answer 1

我能想到的一种方法是使用容器指令来保存编译后的指令。

angular.module('test', [])
  .controller('Test', TestController)
  .directive('appLoader', appLoaderDirective)
  .directive('apple', appleDirective)
  .directive('banana', bananaDirective);
  
function TestController($scope) {
  $scope.apps = ['apple', 'banana']
}

function appLoaderDirective($compile) {
  return {
    scope: { app: '=' },
    link: function(scope, element, attr) {
      // you might have to do camel case to kebab case conversion here, depending on your input
      element.append($compile("<" + scope.app + "></" + scope.app + '>')(scope));
    }
  }
}

function appleDirective() {
  return {
    template: '<div>i am apple!</div>'
  }
}

function bananaDirective() {
  return {
    template: '<div>i am banana!</div>'
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <div ng-repeat='app in apps'>
    <app-loader app='app'></app-loader>
  </div>
</div>