Angular (1.5.8) 动态组件

Question

我正在尝试使用 Angular 1.5.8 构建一种动态仪表板。直到最后的障碍，我已经取得了不错的进步。这实际上是在渲染动态组件。

我尝试了 2 个选项，要么添加 ui-view 并以编程方式传入小部件的名称，或，这就是我的路线猜测 more 正确，我需要弄清楚如何呈现动态小部件。

例如： 当我将项目附加到 dashItems 集合时，它应该呈现一个新的小部件（基于我提供的名称）

我看到我可以使用 ngInclude 替换模板，但我仍然不清楚如何动态注入模板和控制器。（例如，我所有的模板都不会共享一个公共控制器）。

JavaScript:

angular
    .module('myDashboard', [])
    .config(routesConfig)
    .component('dashboard', {
        templateUrl: 'dashboard/dashboard.tpl.html',
        controller: dashboardController
    })
    .component('widgetPie', {
        template: '<h3>Pie Graph</h3>',
        controller: function($log) {
            $log.info('widgetPie: loaded');
        }
    })
    .component('widgetLine', {
        template: '<h3>Line Graph</h3>',
        controller: function($log) {
            $log.info('WidgetLine: loaded');
        }
    });

function routesConfig($stateProvider) {
    // this is only needed if I go the ui-view route.. I assume
    $stateProvider
        .state('widgetPie', { component: 'widgetPie'})
        .state('widgetLine', { component: 'widgetLine'});
}

function dashboardController($log) {
    $log.info('in dashboard');
    this.dashItems = [
        { widget:'widgetPie' },
        { widget:'widgetLine' }
    ];
}

标记 (dashboard/dashboard.tpl.html):

<div>
    <ul>
        <li ng-repeat="item in dashItems">
            <!--somehow render dynamic-->
            <!--<widget-pie></widget-pie>-->
            <!--<div ui-view="item.widget"></div>-->
        </li>
    </ul>
</div>

问题：

1。我已经研究过 ngInclude，但老实说，我不确定在这种情况下如何使用它，如果它是正确的工具，还是我处理方法不正确？

2。我是否应该为此向状态提供者添加项目，EG i / 小部件是否可以被视为子状态（因此我不确定什么将被视为最佳实践）

Answer 1

我最终将 dashboard.tpl.html 文件更改为：

<div>
    <ul>
        <li ng-repeat="item in dashItems">
            <div ng-include="item.widget"></div>
        </li>
    </ul>
</div>

但我还需要通过我的 widgets 文件夹向运行添加一个构建任务并生成以下内容（或者您可以手动添加，我猜是什么让您的船漂浮）。

angular
 .module('myDashboard')
 .run(function ($templateCache) {
    $templateCache.put('widgetPie', '<widget-pie></widget-pie>');
    $templateCache.put('widgetLine', '<widget-line></widget-line>');
 });

以上允许我使用 templateUrl 或内联模板。

.component('widgetPie', {
   templateUrl: 'dashboard/widgetPie.tpl.html',
   controller: function($log) {
      $log.info('widgetPie: loaded');
   }
})
.component('widgetLine', {
    template: '<h1>Some Content</h1>',
    controller: function($log) {
      $log.info('widgetLine: loaded');
    }
})

Answer 2

你可以的。首先，您需要使用包装器组件来帮助您编译动态组件：

app.component('dynamicWrapper',
    {
        controller: function widgetClientCtrl($scope, $compile, $element) {
                    var self = this;
                    self.$onInit = function () {
                          renderWidget(self.name, self.payload);
                    };
                    function renderWidget(name, payload) {
                          var template = '<' + name;

                          if (payload) {
                             $scope.payload = payload;
                             template += ' payload="payload"';
                          }

                          template += '></' + name + '>';
                          $element.append($compile(template)($scope));
                    }
        },
        bindings: {
            name: '@',
            payload: '=?'
        }
    });

您的动态组件：

app.component('someDynamicComponent', {
    templateUrl: 'yourPath',
    controller: dynamicComponentCtrl,
    controllerAs: 'vm',
    bindings: {
        payload: '<'
    }
});

然后：

<li ng-repeat="(name, payload) in vm.dynamicComponents">
      <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
</li>

Angular (1.5.8) 动态组件

Angular (1.5.8) Dynamic Components

components

dynamic

angularjs

angularjs-ng-include