javascript - 如何动态地将动态指令添加到我的 Angular 应用程序中？

Question

我有一个应用程序，因为我需要模拟操作系统窗口类型行为。因此，我需要能够添加多个窗口，每个窗口都有自己的上下文，并且可能有自己的嵌套指令。

我已经有一个 windowDirective 和 userProfile 指令，我想实例化每个指令的新实例，并根据需要添加它或从 dom 中删除它。

到目前为止，我已经尝试通过 WindowService 使用 $compile 来完成此任务，本质上编译一个带有指令标记的字符串，即 $compile("<window><user-profile></user-profile></window>")(scope) ，它似乎创建了一个 dom 树，但抛出了一堆错误。

关于我如何解决这个问题有什么想法吗？

Answer 1

我也做过类似的事情。

对于初学者，您需要创建一个指令，该指令将成为您的主容器(用于将其他窗口放置在其中)。将 Controller 分配给该主容器，该容器将保留您计划插入/删除的所有其他子窗口的列表。每当您想要销毁作用域和内存时，都需要这样做。

var module = angular.module('myModule', []);

module.directive('myContainer', ContainerDirective);
function ContainerDirective() {
    return {
       restrict: 'E',
       controller: ['$scope', '$element', '$compile', function ContainerController($scope, $element, $compile) {
            var winId = 0;
            this.subWindows = {};
            //Create a window
            this.createWindow = function() {
                var subWinElem = angular.element('<my-window>');
                this.subWindows[winId++] = subWinElem;
                $element.append(subWinElem);
                $compile(subWinElem)(scope);
                subWinElem.data('window-id', winId);
                return winId;
            };
            //Destroy a window
            this.destroyWindow = function(winId) {
                if(this.subWindows[winId]) {
                   var subWinElem = this.subWindows[winId],
                       subWinScope = subWinElem.scope();
                   subWinElem.remove();
                   subWinScope.$destoroy();
                   this.subWindows[winId] = null;
                }
            };
            //Clean up on container destroy
            this.dispose = function() {
                angular.forEach(this.subWindows, function(subWinElem) {
                    if(subWinElem) {
                       var subWinScope = subWinElem.scope();
                       subWinElem.remove();
                       subWinScope.$destroy();
                    }
                }); 
            };
       }],
       link: function($scope, elem, attrs, ContainerController) {
          //On click of a button you would create a sub window
          scope.createWindow = function() {
               ContainerController.createWindow();
          };
          //Cleanup anything left in the controller
          $scope.$on('$destroy', function() {
             ContainerController.dispose();
          });
       }
    };
}

子窗口应该是“需要”父 Controller 的指令。要动态调用它们，您可以做的是首先附加指令标记，然后 $compile 对该元素的引用(比 $compile('string') 好得多)。因为您先附加元素然后编译，所以能够毫无问题地要求父 Controller (因为它使用inheritedData)。

module.directive('myWindow', WindowDirective);
function WindowDirective() {
   return {
       restrict: 'E',
       scope: true,
       require: '?^myContainer',
       link: function($scope, elem, attrs, ContainerController) {
          var winId = elem.data('window-id');
          //You would destroy window like so
          $scope.$on('$destroy', function() {
              ContainerController.destroyWindow(winId);
          });
       }
   }
}

附注这是一个非常简化的示例(可能包含拼写错误 :P)，但您已经了解了它的要点。