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

Posted 2023-05-09

【中文标题】从动态插入的标签编译指令

【英文标题】：Compile directive from dynamically inserted tag

【发布时间】：2017-11-26 20:23:55

【问题描述】：

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

<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）。然后我希望我的指令起作用。

【问题讨论】：

其实这样就可以了...你不需要$apply...其他地方一定有错误..

并且不需要编译

我不确定我是否理解正确，但您想要的是一个<my-directive app="app">，它将根据应用程序动态更改其内容。更具体地说，<my-directive> 将根据app 的值动态显示指令。这个假设正确吗？

我添加了进一步的解释。我只想在运行时将任意指令插入到我的模板中并对其进行编译。感谢您的帮助！

【参考方案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>

【讨论】：

谢谢你，成功了！显然我的想法很复杂。