具有角度指令的战略模式

时间:2016-10-30 22:20:43

标签: javascript angularjs angularjs-directive

在我的一个角度项目中,我一直在寻找我想要使用策略模式的情况,但是使用指令作为策略。示例包括可配置仪表板上的小部件(其中'策略'是显示的每个小部件),或者是用户指定请求类型和整个表单实现交换的表单(其中在这种情况下,每种策略都是针对特定类型的表单的实现,我知道这可能被视为URL路由的用例,但并不总是合适的。

看看问题,我可以看到两种可能的方法。第一个是ng-include,其中每个小部件都是'或者表单只是一个ng-include,我们交换模板URL以引入不同的实现。第二个是代理'在内部实例化真实指令的指令,例如,将所需指令作为属性传递。

angular.module("test", []).directive("directiveProxy", function($compile){
  function link(scope, elem, attrs){
    var update = function(){
      var elem1 = $compile("<" + scope.tag + "></" + scope.tag + ">");
      var elem2 = angular.element(elem1(scope));
      elem.empty().append(elem2);
    };
    scope.$watch('tag', update);
    update();
  }

  return {
    restrict: "E",
    scope: {
      content: "=",
      tag: "="
    },
    link: link
  };
})

可以简单地用作:

<directive-proxy tag="real-angular-component"></directive-proxy>

前一种模式具有相对简单的优点,虽然难以传递任何类型的参数,而后者似乎允许参数但是在方式中添加另一个指令以及要求为每个集合定制代理需要传递的参数。

是否有第三种方法可以进行这种我错过的指令交换?这些方法中的任何一个是否都有明显的优势,这意味着它们应该采用的方式?

0 个答案:

没有答案