angular 处理指令的 2 个版本

Question

我需要创建用于 AB 测试的指令的 2 个版本。该指令将具有相同的名称，但可以在不同的模块中。两个指令都可用，因此它可以被外部属性转换 on/off。问题是如何让它在运行时基于页面上的配置对象加载正确的指令版本？例如

angular.module('component_v1', [])
.directive('myDirective', function () {
...
});

angular.module('component_v2', [])
.directive('myDirective', function () {
...
});

HTML

<my-directive></my-directive>

提前致谢。

Answer 1

我认为你只能创建一个指令：

angular.module('component', [])
.directive('myDirective', function () {

  if($scope.externalProperty==='ver_1') {
    //handle for ver 1.
  } else if($scope.externalProperty==='ver_2') {
    //handle for ver 2.
  }
  ...  
  else {
   //handle for ver n.
  }
});

Answer 2

您可以使用 bootstrap 来实现此目的。对于您的情况，您可以根据变量 'someCondition' 使用 componenet_v1 或 component_v2 bootstrap 应用程序。喜欢：

var someCondition=true; // this will be set true or false based on some condition



 if(someCondition)
{
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['component_v1']);
    });
 }
else
{
 angular.element(document).ready(function() {
  angular.bootstrap(document, ['component_v2']);
});
}

并且在您的 html 中，只需使用 <my-directive></my-directive>，它将根据它加载的模块调用正确的指令。

您可以使用任何 DOM 元素代替 'document'

angular 处理指令的 2 个版本

angular handling 2 versions of a directive

directive

angularjs