$编译动态组件

Posted 2023-02-23

【中文标题】$编译动态组件

【英文标题】：$compiling Dynamic Components

【发布时间】：2016-07-02 14:46:55

【问题描述】：

我有一个问题我不知道如何解决，希望有人能帮助...

我正在开发一个需要渲染动态组件的应用程序，为此我要单独编译每个组件并缓存它，以避免重新编译和重新初始化每个组件的控制器。

问题是当我添加一个新组件并使用缓存的 $compiled 组件时，控制器似乎已经消失并停止工作。

我在下面的 plunker 中创建了一个示例的简化...为了说明我的意思...添加组件在进行中

http://plnkr.co/edit/ZN43Cwpi4RnJVf9Xy5K6?p=preview

这是主要指令

angular.module('myApp')
  .directive("dynamicComponents", function($compile, componentConfiguration) 
    return 
      scope: 
        components: '@'
      ,
      link: function(scope, elem, attr) 
        var components = [];
        var renderComponents = function(scopeComponents) 
          for (let i = 0, len = scopeComponents.length; i < len; i++) 
            let componentItem = scopeComponents[i];

            if (!components[componentItem.id]) 
              let directivehtml = '<' + componentItem.type.toLowerCase() + '></' + componentItem.type.toLowerCase() + '>';

              components[componentItem.id] = $compile(directiveHtml)(scope.$new());
            

          

          console.log(components);

          elem.html(components);
        

        scope.$watch(
          function() 
            return componentConfiguration.getComponents();
          ,
          function(newValue) 
            console.log("Rendering Tiles", newValue);

            renderComponents(newValue);
          ,
          true);
      
    
  )

知道我做错了什么吗？

【问题讨论】：

不太清楚预期的行为是什么。似乎可以通过给每个组件一个独立的范围并传入每个对象来简化整个事情

也不清楚你为什么要这样做缓存

【参考方案1】：

我认为这是因为您使用 elem.html() 替换指令的整个 html，当其中一些被编译并且其中一些变为静态时。

无论如何，如果您在示例中将elem.html() 替换为elem.append()，它就可以工作。