Question

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

我正在开发需要渲染动态组件的应用程序，为了做到这一点，我分别编译每个组件并对其进行缓存，以避免重新编译和重新初始化每个组件的控制器。成分

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

我在下面的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动态组件

1 个答案: