Javascript 我们可以在AngularJS应用程序中动态使用指令吗

我试图在ionic框架中调用（或使用）一些自定义指令，动态就像

是的，这不是问题。您可以使用
{{}
插入数据，并在指令中使用该数据编译新元素：

myApp.directive('dynamic', function($compile, $timeout) {
    return {
        restrict: "E",
        scope: {
            data: "@var" // say data is `my-directive`
        },
        template: '<div></div>',
        link: function (scope, element, attr) {
            var dynamicDirective = '<' + scope.data + ' var="this works!"><' + scope.data + '>';
            var el = $compile(dynamicDirective)(scope);

            element.parent().append( el );
        }
    }
});

myApp.directive（'dynamic'，function（$compile，$timeout）{
返回{
限制：“E”，
范围：{
数据：“@var”//say data是`我的指令`
},
模板：“”，
链接：功能（范围、元素、属性）{
var dynamicDirective=''；
var el=$compile（dynamicDirective）（范围）；
element.parent（）.append（el）；
}
}
});

HTML:

---

多一点代码会有所帮助。我不知道，是否可以像标记中的那样执行动态指令

 <{dyntag}></{dyntag}>

以及您的HTML：

<div ng-repeat="dyn in dynamics">
  <your-tag dynamic_element="{dyn}"></your-tag>
</div>

---

我不明白为什么需要动态指令。 简单地使用单一指令并相应地更改模板。 例如—

 angular.module('testApp')
        .directive('dynamicDirective', function($compile,$templateCache,$http) {
          return {
            restrict: 'C',
            link: function($scope,el) {
                    //get template
                          if(radio){
                        $http.get('radio.html', {cache: $templateCache}).success(function(html){
                         //do the things       

                        el.replaceWith($compile(html)($scope));

                    });
                  } else if(checkbox){
                      //load checkbox template 
                       }  //vice-versa
            }
          };

        });

---

您还可以在指令中注入服务变量。

长话短说；不，您不能以这种方式动态加载指令

有几个选项可供选择。正如其他答案所提到的，您可以将上下文作为属性传递（mydir type=“checkbox”）。您可以创建一个动态加载另一个指令的指令，其他人也提到了这一点。这两种选择都不是很好

第一个选项仅在您自己编写指令时有效，而不是在使用诸如ionic之类的工具时有效。它还要求您将多个指令作为一个指令编写，这可能会很快变得非常混乱。这一巨型指令将变得难以测试，并且在将来维护时很容易出错。请注意，这是从视图将数据传递给指令的正确方法，对于这个特定的用例来说并不好

第二种选择是有问题的，因为它太过模糊了。如果有人读取您的html并看到一个名为dynamic的指令，该指令提供了动态数据。。。他们不知道会发生什么。如果他们看到一个名为dropdown的指令，它给出了一个列表，那么他们对结果会是什么有一个合理的想法。可读性很重要，不要吝啬

因此，我建议做一些简单的事情，你可以少做很多工作。只需使用：

---

我们如何从html中获取收音机和复选框值？通过使用el.type，还需要在radio.html中使用scope valies

{"radio", "checkbox", "select"}

<div ng-repeat="dyn in dynamics">
  <your-tag dynamic_element="{dyn}"></your-tag>
</div>

 angular.module('testApp')
        .directive('dynamicDirective', function($compile,$templateCache,$http) {
          return {
            restrict: 'C',
            link: function($scope,el) {
                    //get template
                          if(radio){
                        $http.get('radio.html', {cache: $templateCache}).success(function(html){
                         //do the things       

                        el.replaceWith($compile(html)($scope));

                    });
                  } else if(checkbox){
                      //load checkbox template 
                       }  //vice-versa
            }
          };

        });

<div ng-switch="type">
    <mydir-select ng-switch-when="select"></mydir-select>
    <mydir-checkbox ng-switch-when="checkbox"></mydir-checkbox>
</div>