以编程方式以角度1.6加载零部件

Question

我有一个AngularJS 1.6应用程序，其中有一个小部件部分。

小部件部分是包含3个小部件的行，最终用户可以配置自己。 他获得了所有可用小部件的列表，并且可以选择放置哪个小部件以及在何处放置小部件。

每个小部件都是一个初始化如下的组件：

(
  function(angular) {

    function Module1Controller() {
      var vm = this;

      // other stuff here
    }

    angular.module("app")
      .component(
        "module1", {
          controller: Module1Controller,
          templateUrl: 'module1.html'
        }  
      );
  }
)(angular)

现在，由于用户可以选择要在特定位置渲染的窗口小部件，因此该数据来自Web服务。

基于从WS接收到的数据，我需要能够“激活”一个组件并“停用”所有其他组件。

我首先想到的是做这样的事情：

控制器：

(
  function(angular) {

    function ModulesController() {
      var vm = this;

      vm.firstModule = 1;
      vm.secondModule = 1;
      vm.thirdModule = 1;

      vm.availableModules = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }

    angular.module("app")
      .controller(
        "ModulesController", 
        [
          ModulesController
        ]
      );
  }
)(angular)

视图：

<div class="container-fluid" ng-controller="ModulesController as c">
    <div class="row">
        <div class="col-xs-4"> <!-- third widget area -->
            <module-1 ng-if="c.firstModule == 1"></module-1>
            <module-2 ng-if="c.firstModule == 2"></module-2>
            <module-3 ng-if="c.firstModule == 3"></module-3>
            <module-4 ng-if="c.firstModule == 4"></module-4>
            <module-5 ng-if="c.firstModule == 5"></module-5>
            <module-6 ng-if="c.firstModule == 6"></module-6>
            <module-7 ng-if="c.firstModule == 7"></module-7>
            <module-8 ng-if="c.firstModule == 8"></module-8>
            <module-9 ng-if="c.firstModule == 9"></module-9>
            <module-10 ng-if="c.firstModule == 10"></module-10>
        </div>
        <div class="col-xs-4"> <!-- third widget area -->
            <module-1 ng-if="c.secondModule == 1"></module-1>
            <module-2 ng-if="c.secondModule == 2"></module-2>
            <module-3 ng-if="c.secondModule == 3"></module-3>
            <module-4 ng-if="c.secondModule == 4"></module-4>
            <module-5 ng-if="c.secondModule == 5"></module-5>
            <module-6 ng-if="c.secondModule == 6"></module-6>
            <module-7 ng-if="c.secondModule == 7"></module-7>
            <module-8 ng-if="c.secondModule == 8"></module-8>
            <module-9 ng-if="c.secondModule == 9"></module-9>
            <module-10 ng-if="c.secondModule == 10"></module-10>
        </div>
        <div class="col-xs-4"> <!-- third widget area -->
            <module-1 ng-if="c.thirdModule == 1"></module-1>
            <module-2 ng-if="c.thirdModule == 2"></module-2>
            <module-3 ng-if="c.thirdModule == 3"></module-3>
            <module-4 ng-if="c.thirdModule == 4"></module-4>
            <module-5 ng-if="c.thirdModule == 5"></module-5>
            <module-6 ng-if="c.thirdModule == 6"></module-6>
            <module-7 ng-if="c.thirdModule == 7"></module-7>
            <module-8 ng-if="c.thirdModule == 8"></module-8>
            <module-9 ng-if="c.thirdModule == 9"></module-9>
            <module-10 ng-if="c.thirdModule == 10"></module-10>
        </div>
    </div>
</div>

这可行，但是我觉得这是错误的方法。 如果我有200个小部件怎么办？ 我将不得不编写200次（ <module-N ng-if="c.firstModule == N"></module-N> x3小部件区域）的<module-N ng-if="c.firstModule == N"></module-N> ，这显然不是解决此问题的好方法。

我还考虑过使用ng-include ，但是据我所知，它仅适用于包含模板，我也需要相应的控制器来加载。

这是一个显示我要实现的目标的示例： https ://plnkr.co/edit/uO8SUcmNMOGHcPjc1lWs?p=preview

如您所见，当您更改组合的值时，相应的模块将被替换。

问题是：有没有一种方法可以基于AngularJS 1.6中的某些控制器字段来激活特定组件，而不必声明所有组件并使用ng-if ？

Answer 1

正如我在注释部分所建议的那样，您可以使用module-slot指令并将模块输入为一种模型，并在内部解决所需模块的加载和编译问题。

此解决方案使用ocLazyLoad，但您可以根据需要使用其他加载器。

我已经使用ocLazyLoading提供了一个解决方案来满足您的需求

因此， ng-if仅使用一个指令，则无需声明所有模块并使用ng-if控制其可见性：

<div class="row">
    <div class="col-xs-4">
      <module-slot module="c.firstModule"></module-slot>
    </div>
    <div class="col-xs-4">
      <module-slot module="c.secondModule"></module-slot>
    </div>
    <div class="col-xs-4">
      <module-slot module="c.thirdModule"></module-slot>
    </div>
  </div>

指示：

angular.module("app")
    .directive('moduleSlot', function($ocLazyLoad, $compile) {
      return {
        restrict: 'E',
        scope: {
          module: '='
        },
        link: function(scope, element, attrs) {
          // watch the module change
          scope.$watch('module', function() {
            // load the module
            $ocLazyLoad.load("module" + scope.module + ".js").then(function() {
              // compiles the new component inside the slot
              element.html("<module-" + scope.module + "></module-" + scope.module + ">");
              $compile(element.contents())(scope);

            }, function(e) {
              console.log('errr');
              console.error(e);
            })
          });
        }
      }
    });

参考文献

OcLazyLoad文档

ocLazyLoad存储库中的简单示例

$ compile服务文档

Answer 2

这是一个显示解决方案的朋克 。 关键是创建一个指令以动态关联模板和控制器

app.directive("module", ['$compile', '$http', '$controller', '$templateCache', function ($compile, $http, $controller, $templateCache) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch("model", function (newValue, oldValue, scope) {
                if (newValue) {
                    var template = scope.model.id + ".html";
                    $http.get(template, { cache: $templateCache }).then(function (result) {
                        element.html(result.data);
                        element.children().data('$ngControllerController', $controller(scope.model.id + "Ctrl", { $scope: scope }));
                        $compile(element.contents())(scope);
                    });
                }
            });
        }
    };
}]);