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>

从动态插入的标记

1 个答案: