$编译动态组件

Question

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

我正在开发需要呈现动态组件的应用程序，为了做到这一点，我 $compiling 每个组件并缓存它以避免重新编译和重新初始化每个组件的控制器。

问题是当我添加新组件并使用缓存的 $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);
      }
    }
  })

知道我做错了什么吗？

Answer 1

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

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

$编译动态组件

$compiling Dynamic Components

components

angularjs

angularjs-directive