$compiling动态组件

Question

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

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

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

我按照以下plunker...in顺序创建了示例的简化，以演示…的含义添加正在进行的组件

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()，则它可以工作。